jquery 닫기/열기 구현 > jQuery

본문 바로가기
사이트 내 전체검색


회원로그인

jQuery

 > 개발자료 > jQuery

jQuery

jquery 닫기/열기 구현

페이지 정보

작성자 YJNet 작성일14-08-04 19:07 조회8,332회 댓글0건

본문

닫기 누르면 내용이 사라지고 열기 누르면 다시 나타나게 jquery로 구현
 
 <방법1>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<div>닫기/열기 테스트</div>
<br/>
<a href = "javascript:void(0);" id='btn'>닫기</a>
<div id="open">
 닫기/열기 내용
</div>
<script>
embed=$('#open').html();
$('#btn').click(function(){
 status=$(this).text()
  if(status=='닫기'){$('#open').html(''); $(this).text('열기');}
  else{$('#open').html(embed); $(this).text('닫기'); }
});
</script>
</body>
</html>
 
 
<방법2> - 내용보기 클릭시 내용보여짐
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
  .cont {display:none}
</style>
</head>
<body>
<div class="view">
<div class="cont">내용</div>
<button type="button" class="sbn_view">내용보기</button>
</div>
 
<script>
$(function() {
    $(".sbn_view").on("click", function() {
        $(this).closest(".view").find(".cont").slideToggle();
    });
});
</script>
 
</body>
</html>

댓글목록

등록된 댓글이 없습니다.

jQuery 목록

게시물 검색

접속자집계

오늘
385
어제
310
최대
1,173
전체
1,337,438
그누보드5
회사소개 개인정보취급방침 서비스이용약관    Copyright © www.g-it.kr. All rights reserved.