.toggle()
선택한 요소를 선택한 요소를 숨기고/보여줍니다.
.toggle()
선택한 요소를 선택한 요소를 숨기고/보여줍니다.
문법(Syntax)
$("선택자").toggle();
$("선택자").toggle("시간");
$("선택자").toggle("시간", 함수);
정의(Definition)
- .toggle() 메서드는 선택한 요소를 숨기고/보여줍니다.
- .toggle("시간") 메서드는 선택한 요소를 설정한 시간동안 숨기고/보여줍니다.
- .toggle("시간", 함수) 메서드는 선택한 요소를 설정한 시간동안 숨기고/보여주고 함수를 실행합니다.
Sample1
.toggle() 메서드를 이용하여 요소를 숨기고/보여주는 예제입니다.
결과
속성(Attributes)
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
$(".list1").toggle();
});
$(".choice1 .btn2").on("click", function(e){
$(".list1").toggle(2000);
});
$(".choice1 .btn3").on("click", function(e){
$(".list1").toggle("fast");
});
html
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
</style>
</head>
<body>
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice1">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 리스트를 <em>.toggle()</em> 숨기고/보여줍니다.</a>
<a href="#" class="btn2">클릭하면 리스트를 <em>.toggle(2000)</em> 숨기고/보여줍니다.</a>
<a href="#" class="btn3">클릭하면 리스트를 <em>.toggle("fast")</em> 숨기고/보여줍니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$(".list1").toggle();
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$(".list1").toggle(2000);
});
$(".choice1 .btn3").on("click", function(e){
e.preventDefault();
$(".list1").toggle("fast");
});
</script>
</body>
</html>