當點擊2級菜單項時，jQuery檢測到對1級菜單項的點擊

我有這個html菜單。一些菜單項有一個子菜單。當點擊2級菜單項時，jQuery檢測到對1級菜單項的點擊

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

所以基本上，當你點擊一級菜單項時，它通過滑動它來顯示該菜單項的子菜單。當您單擊下一級菜單項時，如果向上滑動當前子菜單並向下滑動下一個子菜單。

但是......問題是......當你點擊第2級菜單項時，它向上滑動子菜單，然後再次退後。

我相信會發生這種情況，因爲子菜單位於1級菜單的裏面。

我該如何阻止？它是一個意外的行爲。

來源

2013-03-18 Aparistar

你可能會想使用['event.stopPropagation'（http://api.jquery.com/event.stopPropagation/），因此它不泡到li – BeardFist 2013-03-18 21:31:12

由於您使用jQuery考慮使用jQuery函數stopPropagation。

將事件與級別2菜單項綁定時使用它。

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

它將防止事件冒泡，即與父元素對應的事件不會被觸發。

來源

2013-03-18 21:36:28

這似乎停止了1級菜單點擊工作。 – Aparistar 2013-03-18 21:56:17

我發現通過添加錨標記並將它們與點擊事件綁定在一起，如下所示。

非常感謝......

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

來源

2013-03-18 22:08:03 Aparistar

當點擊2級菜單項時，jQuery檢測到對1級菜單項的點擊

回答

相關問題