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

【问题标题】：jQuery detects click on level 1 menu item when clicking level 2 menu items单击级别 2 菜单项时，jQuery 检测单击级别 1 菜单项
【发布时间】：2013-03-18 21:28:47
【问题描述】：

我有这个 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 内。

我怎样才能阻止这种情况？这是一个意想不到的行为。

【问题讨论】：

你可能想使用event.stopPropagation 这样它就不会冒泡到 li

标签： jquery html menu

【解决方案1】：

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

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

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

防止事件冒泡，即不会触发父元素对应的事件。

【讨论】：

【解决方案2】：

我发现通过添加锚标记并将它们与点击事件绑定如下，它可以工作。

非常感谢...

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

【讨论】：