Question

我有这个HTML菜单。某些菜单项有子菜单。

<ul class="menu uppercase">
<li class="mitem">Level 1 Menu Item
    <ul class="submenu">
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
    </ul>
</li>
<li class="mitem">Level 1 Menu Item
    <ul class="submenu">
        <li class="smitem">Name of Collection</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
        <li class="smitem">Level 2 Menu Item</li>
    </ul>
</li>
<li class="mitem">Level 1 Menu Item</li>
<li class="mitem">Level 1 Menu Item</li>
<li class="mitem">Level 1 Menu Item</li>

Jquery看起来像这样。

$("li.mitem").click(function(){//when menu item is clicked
        $("ul.submenu").slideUp();//hide all sub menus
        $("li.mitem").css('margin-bottom','0px').css('border-left','none');//reset margin bottom and left border
        $(this).css('border-left','1px solid #E0E0E0').css('padding-left','9px');//add border and padding to this menu item
        $(this).children("ul.submenu").slideDown();//show menu items child sub menu
        $(this).children().children("li.smitem:first").css('padding-top','18px');//add padding to first sub menu item
        if($(this).children().length>0){
            $(this).css('margin-bottom','18px');
        }
    });

所以基本上，当你点击1级菜单项时，它会通过向下滑动显示该菜单项的子菜单。当您单击下一级菜单项时，如果向上滑动当前子菜单并向下滑动下一个子菜单。

然而....问题是......当您点击2级菜单项时，它会向上滑动子菜单，然后再次向下滑。

我相信这是因为子菜单在1级菜单的li中。

我怎么能阻止这个？这是一种意想不到的行为。

Answer 1

由于您使用的是jQuery，请考虑使用jQuery函数stopPropagation。

将事件与2级菜单项绑定时使用它。

$('.smitem').bind('click'), function(event) {
    //....does something here....
    event.stopPropagation();
});

它将阻止事件冒泡，即不会触发与父元素相对应的事件。

Answer 2

我发现通过添加锚标记并将其与click事件绑定如下，它可以正常工作。

非常感谢...

$('li.smitem a').click(function(e){
     e.stopImmediatePropagation();
})

单击2级菜单项时，jQuery检测单击1级菜单项

2 个答案: