jQuery - multi level menu for mobile

Question

I need to make menu with multi-level sub menus for mobile. This is dynamic menu, so I can not add more classes to html. Menu is sliding down when I click on element which have child .sub-menu:

> ul.sub-menu

But when I want to click another (deeper) element in same node all this node menu is going to slideUp.

Here is my code: jsFiddle

For example:

First > 03 > (closing) > First > (03 is opened) > 03-02 > (closing) > First > 03 > (closing) > First > My node to element 03-02-02 is already opened.

Thanks for advance for your help

FULL SOLUTION HERE: jsFiddle

Answer 1

You can try to bind the click events to every a (instead of li ) and find the submenu to slide up/down with siblings() function.

You can also use slideToggle() to open/close submenus. The click is prevented only if is present a sibling ul .

var test1 = $('#menu-mobile-slide li > a');
test1.on('click', function(e) {
    var mobileMenu = $(this).siblings('ul');
    if (mobileMenu.length > 0) {
      e.preventDefault();
    }
    mobileMenu.slideToggle();
});

Answer 2

Try using this to solve the issue

var test1 = $( '#menu-mobile-slide ul.menu li' );
    test1.on( 'click', function(e) {
        e.preventDefault();

        var mobileMenu = $(e.target).parent().find( '> ul.sub-menu' );
        if( mobileMenu.css('display') == 'none' ) {
            mobileMenu.slideDown();
            e.stopPropagation();
        } else {
            mobileMenu.slideUp();
            e.stopPropagation();
        }
    });