Propagation issue with sub-menus

Question

On my page (pass = "shooga1"), clicking on COLLECTIONS (left sidebar) displays a sub-menu containing one item named "COLLECTION #1". Clicking on this items display yet another sub-menu, whose items for some reason cannot be clicked. Why not?

Here's my code:

$( 'li.item_collection' ).toggle(function() {
    $( 'li.item_collection > .sub-menu' ).slideDown( { duration: 200, easing: 'easeInOutExpo' } );
}, function() {
    $( 'li.item_collection > .sub-menu' ).slideUp(100);
});
$( 'li.item_collection > .sub-menu' ).click(function(e) {
   e.stopPropagation();
});

$( 'li.item_collection > .sub-menu > li' ).toggle(function() {
    $(this).children('ul').slideDown( { duration: 200, easing: 'easeInOutExpo' } );
}, function() {
    $(this).children('ul').slideUp(100);
});
$( 'li.item_collection > .sub-menu > .sub-menu > li' ).click(function(e) {
   e.stopPropagation();
});

tymeJV · Answer 1 · 2015-06-03T14:35:42.967

Your toggles are a bit out of place...they should be inside the click handlers. You can simplify the code a ton though with one handler for everything and a simple child menu check:

$(".menu li a").click(function(e) {
    e.preventDefault(); //Dont goto the link right away

    //Check for the existence of a ul at the first index
    var submenu = $(this).parent("li").find("ul:eq(0)");
    if (submenu.length) {
        //If a child menu, toggle it
        submenu.slideToggle();
    } else {
        //No child menu, head to the link!
        location.href = this.href;
    }
});

score 1 · Answer 2 · answered Jun 02 '15 at 23:53

1

Remove e.stopPropagation(); from the bottom part of the jquery (the one for the second selection box)

answered Jun 02 '15 at 23:53

omikes

8,064
8
37
50

score 1 · Answer 3 · answered Jun 09 '15 at 23:49

Call me crazy, but you have an A element. So, when you click on the li row you are actually clicking an A element - one level under the li - whose DEFAULT behavior is to open a link.

Have you tried e.preventDefault() besides e.stopPropagation()? because the stopPropagation (also stopImmediatePropagation) will stop bubbling up... but you have a link there, so you want to stop the default behavior also.

Propagation issue with sub-menus

3 Answers3