子菜单的传播问题

Question

在我的页面(pass =" shooga1")上，点击COLLECTIONS(左侧栏)会显示一个子菜单，其中包含一个名为"COLLECTION #1"的项目。单击这些项会显示另一个子菜单，由于某些原因无法单击其中的项。为什么不呢?

下面是我的代码:

$( '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

你的开关有点不合适…它们应该在click处理程序中。你可以通过一个处理程序和一个简单的子菜单检查来大大简化代码:

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

将e.stopPropagation();从jquery的底部(第二个选择框)移除

Answer 3

可以说我疯了，但你有一个A元素。所以，当你点击li行时，你实际上是在点击一个A元素——在li下一级——它的默认行为是打开一个链接。

除了e.p stoppropagation()，你有没有试过e.p preventdefault ()?因为stopPropagation(也叫stopImmediatePropagation)会停止冒泡…但是这里有一个链接，所以你也需要停止默认行为