折叠菜单

Question

调用此函数时会显示一个子菜单（基本上是单击.sidr-class-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();
});