Question

在my page上（pass =＆＃34; shooga1＆＃34;），点击COLLECTIONS（左侧边栏）会显示一个子菜单，其中包含一个名为＆＃34; COLLECTION＃1＆＃34;的项目。单击此项目会显示另一个子菜单，由于某种原因无法单击其中的项目。为什么不呢？

这是我的代码：

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

从jquery的底部删除e.stopPropagation();（第二个选择框的那个）

Answer 3

叫我疯了，但你有一个A元素。因此，当您单击li行时，实际上是单击A元素 - li下的一个级别 - 其DEFAULT行为是打开链接。

除了e.stopPropagation（）之外你有没有尝试过e.preventDefault（）？因为stopPropagation（也就是stopImmediatePropagation）会停止冒泡......但是你有一个链接，所以你也要停止默认行为。

子菜单的传播问题

3 个答案: