이 jQuery에 활성 클래스 추가 ...?

Question

나는 완벽하게 작동되는 간단한 토글, 거의 아무것도 알고 그것을 함께 자갈을 manaaged이 ..

HTML ..

<ul> 
    <li id="menu-item-346" class="parents-toggle"><a href="#">Parent Button</a> 

     <ul class="sub-menu"> 

      <li id="menu-item-347" class="parents-toggle-inner"><a href="#">Child Button</a> 

      <ul class="sub-menu"> 
       <li id="menu-item-348" class="menu-item">Button</a></li> 
       <li id="menu-item-349" class="menu-item">Button</a></li> 
      </ul> 
    </li> 
</ul> 

JQuery와 ....

$(".parents-toggle > a").click(function() { 
     $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp(); 
     $(this).siblings(".sub-menu").slideToggle(); 
     }); 

     $(".parents-toggle-inner > a").click(function() { 
     $(".parents-toggle-inner > ul.sub-menu").not($(this).siblings()).slideUp(); 
     $(this).siblings(".sub-menu").slideToggle(); 
     }); 

버튼을 클릭하여 해당 메뉴를 축소하면 해당 특정 버튼에 활성 클래스가 추가되므로 클릭하면 메뉴가 열리면서 버튼이 다른 색상으로 유지 될 수 있습니까?

Answer 1

확실히, jQuery의 toggleClass() 기능을 다음과 같이 사용하십시오 : jsFiddle example.

$(".parents-toggle > a").click(function() { 
    $(this).toggleClass('toggled'); 
    $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp(); 
    $(this).siblings(".sub-menu").slideToggle(); 
}); 

$(".parents-toggle-inner > a").click(function() { 
    $(this).toggleClass('toggled'); 
    $(".parents-toggle-inner > ul.sub-menu").not($(this).siblings()).slideUp(); 
    $(this).siblings(".sub-menu").slideToggle(); 
});​ 

$(this).toggleClass('toggled');을 함수에 추가하여 필요에 따라 클래스를 추가/제거 할 수 있습니다.