Distribution problem with submenu

Question

On my page (pass = "shooga1"), clicking on COLLECTIONS (left sidebar), a submenu will appear containing one item with the name "COLLECTION # 1". When you click on these items, another submenu is displayed, whose items cannot be pressed for any reason. Why not?

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

Answer 1

Your switches are a little out of place ... they should be inside click handlers. You can simplify the ton code, although with one handler for everything and a simple check on the kids menu:

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

Answer 2

Remove e.stopPropagation(); from the bottom of jquery (one for the second block of choice)

Answer 3

Call me crazy, but you have element A. So when you click on the line li, you actually click on element A - one level under the name li, by default DEFAULT opens a link.

Have you tried using e.preventDefault () other than e.stopPropagation ()? because stopPropagation (also stopImmediatePropagation) will stop popping up ... but you have a link, so you also want to stop the default behavior.