코드랩 레퍼런스
.toggle() 본문
Definition
- .toggle() 메서드는 선택한 요소를 숨김/노출합니다.
Syntax
$("selector").toggle();
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .toggle() |
Sample1 클릭하면 없어지고, 클릭하면 나타나는 예제입니다.
효과(Effect)
- 1
- 2
- 3
- 4
- 5
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<style>
.list {overflow: hidden; min-height: 150px;}
.list li {float: left; width: 19%; margin:0.5%; list-style: none; position: relative; }
.list li img {width: 100%; }
.list li em {display:block; width: 20px; height: 20px; background-color: #ec407a; color: #fff; font-size: 12px; position: absolute; left: 5px; top:5px; border-radius: 50%; text-align: center; line-height: 22px;}
.btn a {border:1px solid #F06950; padding: 5px 20px 3px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3 class="h3">효과(Effect)</h3>
<div class="list">
<ul>
<li class="one1"><em>1</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img01.jpg" width="200"></li>
<li class="one2"><em>2</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img02.jpg" width="200"></li>
<li class="one3"><em>3</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img03.jpg" width="200"></li>
<li class="one4"><em>4</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img04.jpg" width="200"></li>
<li class="one5"><em>5</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img05.jpg" width="200"></li>
</ul>
</div>
<div class="btn">
<li><a href="#" class="btn1">Click </a> $(".list li").toggle();</li>
<li><a href="#" class="btn2">Click </a> $(".list li").toggle("fast");</li>
<li><a href="#" class="btn3">Click </a> $(".list li").toggle("normal");</li>
<li><a href="#" class="btn4">Click </a> $(".list li").toggle("slow");</li>
<li><a href="#" class="btn5">Click </a> $(".list li").toggle(2000);</li>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".btn1" ).click(function(e) {
e.preventDefault();
$(".list li").toggle();
});
$( ".btn2" ).click(function(e) {
e.preventDefault();
$(".list li").toggle("fast");
});
$( ".btn3" ).click(function(e) {
e.preventDefault();
$(".list li").toggle("normal");
});
$( ".btn4" ).click(function(e) {
e.preventDefault();
$(".list li").toggle("slow");
});
$( ".btn5" ).click(function(e) {
e.preventDefault();
$(".list li").toggle(2000);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<style>
.list2 {overflow: hidden; min-height: 150px;}
.list2 li {float: left; width: 19%; margin:0.5%; list-style: none; position: relative; }
.list2 li img {width: 100%; }
.list2 li em {display:block; width: 20px; height: 20px; background-color: #ec407a; color: #fff; font-size: 12px; position: absolute; left: 5px; top:5px; border-radius: 50%; text-align: center; line-height: 22px;}
.btn a {border:1px solid #F06950; padding: 5px 20px 3px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3 class="h3">효과(Effect)</h3>
<div class="list2">
<ul>
<li class="one1"><em>1</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img01.jpg" width="200"></li>
<li class="one2"><em>2</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img02.jpg" width="200"></li>
<li class="one3"><em>3</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img03.jpg" width="200"></li>
<li class="one4"><em>4</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img04.jpg" width="200"></li>
<li class="one5"><em>5</em><img src="https://tistory1.daumcdn.net/tistory/2141493/skin/images/img05.jpg" width="200"></li>
</ul>
</div>
<div class="btn">
<li><a href="#" class="btn10">Click </a> $(".list li").toggle();</li>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".btn10" ).click(function(e) {
e.preventDefault();
$(".list2 li").first().toggle("fast", function Next() {
$(this).next("li").toggle("fast", Next );
});
});
});
</script>
</body>
</html>
Share
Related Articles
more
Ad
Comments