0

I have this html menu. Some menu items have a submenu.

<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>

The Jquery Looks like this.

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

So basically, when you click on a level 1 menu item it displays the submenu for that menu item by sliding it down. when you click on the next level 1 menu item if slides up the current sub menu and slides down the next sub menu.

However.... and the problem is... When you click on a level 2 menu item it slides up the sub menu and then back down again.

I believe this is happening because the sub menu is within the li of the level 1 menu.

How can i stop this? Its an unexpected behaviour.

4

2 回答 2

0

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

非常感谢...

$('li.smitem a').click(function(e){
     e.stopImmediatePropagation();
})
于 2013-03-18T22:08:03.703 回答
0

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

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

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

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

于 2013-03-18T21:36:28.353 回答