jquery 닫기/열기 구현
페이지 정보
작성자 YJNet 작성일14-08-04 19:07 조회12,487회 댓글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>
<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/>
<div>닫기/열기 테스트</div>
<br/>
<a href = "javascript:void(0);" id='btn'>닫기</a>
<div id="open">
닫기/열기 내용
</div>
<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>
embed=$('#open').html();
$('#btn').click(function(){
status=$(this).text()
if(status=='닫기'){$('#open').html(''); $(this).text('열기');}
else{$('#open').html(embed); $(this).text('닫기'); }
});
</script>
</body>
</html>
</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>
<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>
<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>
</html>
댓글목록
등록된 댓글이 없습니다.
