摺疊菜單

Question

我當這個函數被調用（基本上是被點擊.sidr級-menu_arrow）時顯示的子菜單：

<li id="menu-item-169"> 
<a href="#">Main item with drop down 
<span class="sidr-class-menu_arrow"><i class="fa fa-angle-down"></i></span></a> 
<ul class="sidr-class-sub-menu"> 
    <li><a href="#">Sub item</a></li> 
    <li><a href="#">Sub item</a></li> 
    <li><a href="#">Sub item</a></li> 
</ul> 
</li> 



jQuery('.sidr-class-menu_arrow').on('click', function (e) { 
     e.preventDefault(); e.stopPropagation(); 
     jQuery(this).addClass('sidrsubmenu_on'); 
     jQuery(this).parent().parent().find('.sidr-class-sub-menu:eq(0)').slideDown(); 
}); 

這工作，但一旦打開我想成爲能夠再次點擊.sidr-class-menu_arrow並關閉子菜單，顛倒過程。

我已經試過這樣：

jQuery('.sidr-class-menu_arrow .sidrsubmenu_on').on('click', function (e) { 
     e.preventDefault(); e.stopPropagation(); 
     jQuery(this).removeClass('sidrsubmenu_on'); 
     jQuery(this).parent().parent().find('.sidr-class-sub-menu:eq(0)').slideUp(); 
}); 

，但無濟於事。

有人可以指點我正確的方向嗎？謝謝！

Answer 1

你可以嘗試的slideToggle和toggleClass

jQuery('.sidr-class-menu_arrow').on('click', function (e) { 
     e.preventDefault(); e.stopPropagation(); 
     jQuery(this).toggleClass('sidrsubmenu_on'); 
     jQuery(this).parent().parent().find('.sidr-class-sub-menu:eq(0)').slideToggle(); 
});