슬라이드 메뉴

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이 빠지면 두번 클릭해야 동작한다.  

'jQuery' 카테고리의 다른 글

조작하려는 엘리먼트 선택하기  (0) 2011.06.20
텍스트 메뉴 롤오버  (0) 2011.06.01
JQuery 플러그인  (0) 2011.04.06
택스트 on_off 탭메뉴 1  (0) 2011.01.27
tree 메뉴  (0) 2010.10.14
: