앞에서 설명했던 jQuery 코드를 응용하여 항목을 누르면 다른 항목은 모두 숨겨지도록 수정한 버전입니다. 시각적인 효과상으로 보기 좋도록 slideUp()을 이용했습니다.
$(document).ready(function() {
jQuery(".content").hide();
//content 클래스를 가진 div를 표시/숨김(토글)
$(".heading").click(function()
{
$(".content").not($(this).next(".content").slideToggle(500)).slideUp();
});
});
(* 참고: 워드프레스에서 위 코드를 사용할 경우 $를 일괄적으로 jQuery로 변경하시기 바랍니다.)
추가:
위와는 조금 다르게 id와 class 요소에 일련번호(예: menu1, menu2, menu3...)가 붙은 경우에는 CSS 속성 선택자를 사용하여 id와 class를 지정하면 됩니다.
$(document).ready(function() {
$('[id^=showmenu]').click(function() {
$('[class^=menu]').not($(this).next('[class^=menu]').slideToggle("slow")).hide(); // 현재 선택한 항목 다음의 하위 항목을 제외한 모든 항목을 축소합니다.
});
});
hide() 대신 slideUp()을 사용하면 더 좋은 효과를 얻을 수 있습니다(참고). .not 메소드에 대한 정보는 여기를 참고하시기 바랍니다.
댓글 남기기