jQuery

슬라이드 메뉴

라크젠 2011. 5. 23. 10:28
.hasClass
매치되는 엘리먼트에 매개변수로 전달받은 클래스명이 있는지 확인한다.
일치하는 클래스명이 있으면 true, 없으면 false를 반환한다.

*********************************************************************************************

h2 {cursor:pointer;}
.none {display:none;}
.list {cursor:pointer;}


 function slide(obj) {
    if( jQuery(obj).hasClass("on") ) {
      jQuery(obj).find('.test').slideUp();
      jQuery(obj).removeClass("on");
      jQuery(obj).find("h2").addClass("on");
     } else {
      jQuery(obj).find('.test').slideDown();
      jQuery(obj).addClass("on");
      jQuery(obj).find("h2").removeClass("on");
     }
   }

<div class="list on" onclick="slide(this)">
    <h4>열렸다닫힘</h4>
    <div class="test">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
    <h4>열렸다닫힘</h4>
    <div class="test none">내용입니다.</div>
</div>
<div class="list" onclick="slide(this)">
    <h4>열렸다닫힘</h4>
    <div class="test none">내용입니다.</div>
</div>

*************************************************************************************

첫번째 list 그룹에서 on이 빠지면 두번 클릭해야 동작한다.