jQuery 토글 숨기기/표시
jQuery 라이브러리는 코드 더미의 사용을 최소화하고 더 적은 수의 코드 라인으로 솔루션을 돕습니다.
jQuery 버전 1.8까지 toggle() 메서드가 널리 사용되었으며 버전 1.8에서는 더 이상 사용되지 않습니다. 버전 1.9에서는 고유한 토큰으로 제거되었습니다.
예시에서 toggle() 함수가 어떻게 작동하는지, 그리고 나중에 왜 이것이 권장되지 않는지 논의할 것입니다. 토글 동작에 대한 솔루션을 인식하는 또 다른 방법은 show() 및 hide() 메서드를 사용하는 것입니다.
이와 관련하여 조건문을 고려할 것이므로 하나의 버튼을 사용하여 토글 작업을 수행할 수 있습니다. 더 나은 시각화를 위해 인스턴스를 살펴보겠습니다.
jQuery의 toggle() 메서드를 사용하여 숨기기/표시 전환
toggle() 메소드의 사용 사례에서는 일반적으로 click 이벤트에 의해 트리거됩니다. 다시 말하지만, 메소드 구현에는 preventDefault()와 함께 또 다른 click 이벤트가 있습니다.
따라서 더블 클릭 이벤트를 무효화하고 올바르게 작동해야 합니다. 그러나 이 방법은 너무 직관적이어서 이벤트가 두 번 이상 호출되면 종종 문제가 발생합니다.
그래서 이 애매모호한 특성을 없애기 위해 나중에 이 메서드를 제거했다. 그러나 여전히 명시적으로 사용되는 것으로 보이며 다른 방법보다 더 적은 수의 코드 행으로 사용할 수 있습니다.
기능 시연을 위한 코드를 살펴보겠습니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
$("#ele2").toggle(1500);
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
출력:
-method-of-jquery-to-toggle.webp)
hide() 및 show() 메서드를 사용하여 숨기기/표시 전환
여기에서 click 이벤트의 인스턴스로 시작하고 나중에 버튼을 클릭할 때 콘텐츠가 표시되는지 확인하는 조건문을 생성합니다. 만약 그것이 진실의 경우라면, 우리는 그것을 hide()로 설정합니다. 그렇지 않으면 show()로 설정합니다.
코드 블록을 확인하고 프로세스를 살펴보겠습니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
var x = $('#ele2');
if(x.is(':visible')){
x.hide("slide");
}
else{
x.show("slide");
}
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
출력:
-and-show()-method-to-toggle.webp)
