jQuery 토글 가시성
이 튜토리얼은 jQuery를 사용하여 요소의 가시성을 전환하는 방법을 보여줍니다.
jQuery 토글 가시성
jQuery 메서드 toggle()을 사용하여 HTML 요소의 가시성을 토글할 수 있습니다. 토글 기능을 구현하기 위해 show() 및 hide() 메서드를 모두 구현합니다.
이 방법의 구문은 다음과 같습니다.
toggle( speed, [callback])
보시다시피 메서드는 두 개의 매개변수를 사용합니다. 둘 다 선택 사항입니다. 여기서 speed는 세 가지 문자열 값 slow, normal 또는 fast 또는 밀리초 단위의 정수 값을 갖는 토글 애니메이션의 속도이고 callback은 다음을 수행할 수 있는 함수입니다. 애니메이션이 완료되면 호출됩니다.
두 선택적 매개변수를 사용하여 간단한 예를 살펴보겠습니다.
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle() method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function(){
$("#toggleDiv").toggle( 'slow', function(){
$("#Info").text('The visibility toggle is performed');
});
});
});
</script>
<style>
#toggleDiv {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
</head>
<body>
<button id = "toggle"> Toggle the Element </button>
<div id = "toggleDiv">
<h1>Delftstack</h1>
</div>
<div id = "Info"></div>
</body>
</html>
위의 코드는 버튼을 클릭할 때마다 주어진 div 요소를 토글하고 토글이 완료되면 정보를 표시합니다.
출력을 참조하십시오.
show() 및 hide() 메서드를 사용하여 jQuery에서 요소의 가시성 전환
jQuery는 또한 개별 작업을 수행하기 위해 show() 및 hide() 메서드를 제공합니다. 또한 이러한 메서드를 함께 구현하여 jQuery에서 요소를 토글할 수 있습니다.
이러한 메서드의 구문은 다음과 같습니다.
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed 및 callback은 toggle() 메소드와 동일한 매개변수입니다. 다음 메서드를 사용하여 간단한 토글 예제를 시도해 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Show Hide methods</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1:visible").length ){
$("#Demobox1").hide("slow");
} else {
$("#Demobox1").show("slow");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2:visible").length ){
$("#Demobox2").hide("slow");
} else {
$("#Demobox2").show("slow");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3:visible").length ){
$("#Demobox3").hide("slow");
} else {
$("#Demobox3").show("slow");
}
});
</script>
</body>
</html>
위의 코드는 toggle() 메서드와 유사하게 작동합니다. 출력을 참조하십시오.
css() 메서드를 사용하여 jQuery에서 요소의 가시성 전환
요소의 가시성을 토글하기 위해 jQuery 메서드 css()를 사용할 수도 있습니다. 이를 수행하려면 div의 가시성이 숨겨져 있으면 표시로 설정하고 그 반대의 경우도 가능하도록 조건을 만들어야 합니다.
css() 메서드의 구문은 다음과 같습니다.
$("#Demobox1").css("visibility","hidden");
$("#Demobox1").css("visibility","visible");
가시성이 숨겨져 있으면 표시되도록 설정하십시오. 그렇지 않으면 표시되면 숨김으로 설정하십시오.
예를 들어 보겠습니다.
<!doctype html>
<html lang="en">
<head>
<title>jQuery toggle with Css method</title>
<script src = "https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#Demobox1 {
background: lightgreen;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox2 {
background: lightblue;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
#Demobox3{
background: pink;
width: 150px;
height: 150px;
margin-bottom:
10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="Demobox1"><h1>1</h1></div>
<div id="Demobox2"><h1>2</h1></div>
<div id="Demobox3"><h1>3</h1></div>
<button id="Click1">Toggle Box 1 visibility</b>
<button id="Click2">Toggle Box 2 visibility</b>
<button id="Click3">Toggle Box 3 visibility</b>
</div>
<script>
$("#Click1").click(function(){
if ( $("#Demobox1").css("visibility") == "visible" ){
$("#Demobox1").css("visibility","hidden");
} else {
$("#Demobox1").css("visibility","visible");
}
});
$("#Click2").click(function(){
if ( $("#Demobox2").css("visibility") == "visible" ){
$("#Demobox2").css("visibility","hidden");
} else {
$("#Demobox2").css("visibility","visible");
}
});
$("#Click3").click(function(){
if ( $("#Demobox3").css("visibility") == "visible" ){
$("#Demobox3").css("visibility","hidden");
} else {
$("#Demobox3").css("visibility","visible");
}
});
</script>
</body>
</html>
위의 코드에는 CSS 가시성 속성을 설정하여 다른 버튼을 사용하여 가시성을 전환할 수 있는 세 가지 divs가 포함되어 있습니다.
출력을 참조하십시오.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook