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

Answer 1

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