Collapsing a menu

387
February 23, 2017, at 10:58 PM

I have a sub-menu that is displayed when this function is called (essentially when .sidr-class-menu_arrow is clicked on):

<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();
}); 

This works but once open I want to be able to click again on .sidr-class-menu_arrow and close the sub-menu, reversing the process.

I've tried this:

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();
}); 

but to no avail.

Can someone point me in the right direction please? Thanks!

Answer 1

You can try slideToggle and 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();
});
READ ALSO
Fullpage.js not working properly when responsiveWidth is added

Fullpage.js not working properly when responsiveWidth is added

I have a fullpagejs implementation with three sections and it works fine in desktops

528
Animation not responding on time

Animation not responding on time

I'm attempting to create a Jquery animation in which one object moves from left to right until it reaches a certain position on the windowThen the object should move all the way back to its origin

292
How to pass a variable into jquery&#39;s $.post success callback function

How to pass a variable into jquery's $.post success callback function

I want jquery to keep track of multiple $posts and know which one it's referring to on success

324
Javascript not working on custom list sharepoint

Javascript not working on custom list sharepoint

I've created a custom list and it has a choice option for a specific statusIf I insert this code on the chrome console it triggers the code but when I added in a content editor it does not work

386