由孩子繼承的jQuery隱藏

我有一個有趣的jQuery問題。基本上，我需要一個粘滯的子菜單，當我將鼠標懸停在另一個父級上以顯示子菜單時隱藏，然後在我沒有在子菜單上懸停在另一個父級上時再次出現。這一切正常，問題是，當我將鼠標懸停在粘滯子菜單中的子li上時，子菜單翻轉出來，在顯示和不顯示之間閃爍。看來我的jquery是由孩子李繼承的？反正這裏的代碼：由孩子繼承的jQuery隱藏

CSS

.current-menu-parent ul{ 
    display:block; 
    position:absolute; 
} 
#primary-nav ul li:hover ul { 
    display:inline; 
    position:absolute; 
} 
#primary-nav ul li > ul{ 
    display:none; 
}

的JavaScript

$(document).ready(function(){ 
    $(".current-menu-parent ul").show() 
    $("#primary-nav > ul.menu li").mouseover(function(){ 
    $(".current-menu-parent ul").hide(); 
    }); 
    $("#primary-nav > ul.menu li").mouseout(function(){ 
    $(".current-menu-parent ul").show(); 
    }); 
});

HTML

<div id="primary-nav"> 
    <ul class="menu"> 
    <li>item</li> 
    <li class="current-menu-parent">This is the current menu parent item 
     <ul> 
      <li>Current page</li> 
      <li>page</li> 
      <li>page</li> 
     </ul> 
    </li> 
    <ul> 
</div>

來源

2012-07-10 codeprokanner

這裏是問題中的一個小提琴http://jsfiddle.net/CBpHg/ – Huangism 2012-07-10 20:54:48

您需要申請安德魯的回答，並補充一點：

$(".current-menu-parent ul").mouseover(function(e){ 

    e.stopPropagation(); 

});

查看完整的小提琴jsfiddle.net/CBpHg/1/

更新：

爲了解釋這一點時，您將鼠標懸停在最低級別的li上，懸停事件通過隱藏功能一路冒出來，這就是菜單消失的原因。所以我們在ul上使用stopPropagation來防止它進一步發展。你也可以在李的最底層使用它。

來源

2012-07-10 21:07:30 Huangism

是的。謝謝您的幫助！用這一個把我的頭撞在牆上。 – codeprokanner 2012-07-10 21:17:43

那是因爲你的選擇，，第二部分適用於所有li小號載在ul.menu。您可能需要使用ul.menu > li來代替，以便只有在懸停li（直接子代ul.menu）時纔會觸發事件。

來源

2012-07-10 20:52:36

感謝您的貢獻！ – codeprokanner 2012-07-10 21:18:04

$("#primary-nav > ul.menu li").hover(function() { 
    $(this).children("ul").show(); 
}, function() { 
    $(this).children("ul").hide(); 
});

這樣它會顯示/隱藏李的任何ul孩子。它適用於你的問題。

來源

2012-07-10 20:55:15 iurisilvio

這在大部分情況下都能正常工作，但是當子菜單li被徘徊時，然後鼠標移出ul disapears。 – codeprokanner 2012-07-10 21:09:52

由孩子繼承的jQuery隱藏

回答

相關問題