迭代通過無序列表（nav）

Question

我正在使用Mega菜單並使用無序列表來觸發事件以顯示Mega菜單。 這是導航欄的HTML代碼：

<div class="alpha omega grid_15" id="topNavLink"> 
    <ul id="navRollOver"> 
     <li><a href="#" title="SOCCER" target="_self" >SOCCER</a></li> 
     <li><a href="#" title="TENNIS" target="_self" >TENNIS</a></li> 
     <li><a href="#" title="BASEBALL" target="_self" >BASEBALL</a></li> 
     <li><a href="#" title="BASKETBALL" target="_self" >BASKETBALL</a></li> 
     <li><a href="#" title="FOOTBALL" target="_self" >FOOTBALL</a></li> 
     <li><a href="#" title="GOLF" target="_self" >GOLF</a></li> 
     <li><a href="#" title="RUGBY" target="_self" >RUGBY</a></li> 
     <li><a href="#" title="HOCKEY" target="_self" >HOCKEY</a></li> 
    </ul> 
    </div> 

我打電話與subNavContainer類DIV，CSS狀態display: none;

這就是我想要做的......我打算讓所有的li陣列和目標> a，並聽取鼠標進入事件觸發的大型菜單slideDown。

我需要幫助迭代通過li檢查，如果有a並根據mouseenter上a我想觸發顯示使用slideDown的megaMenu的事件，當鼠標移動到next()a，我想觸發slideUp事件。

同樣的，如果mouseenters的subNavContainer應該保留在屏幕上，並且當mouseleaves的subNavContainer或者如果屏幕上的subNavContainer應該slideUp上沒有動靜。

Answer 1

要選擇所有可在li元素的孩子您的選擇可以是這樣的鏈接：

//select root element (`ul`), get its children (in this case the `li` elements), then get the children `a` elements of those `li` elements 
$('#navRollOver').children().children('a') 

爲了然後綁定到mouseenter事件對這些元素：

//note that `.on()` is new in jQuery 1.7 and is the same in this case as `.bind()` 
$('#navRollOver').children().children('a').on('mouseenter', function() { 
    //do slideDown 
}); 

然後slideUp光標離開鏈接元素後的菜單：

//you can chain function calls with jQuery functions, 
//so we make our selection of the `a` elements, bind a `mouseenter` event handler to them, 
//then using the same selection, we bind a `mouseleave` event handler 
$('#navRollOver').children().children('a').on('mouseenter', function() { 
    //do slideDown 
}).on('mouseleave', function() { 
    //do slideUp 
}); 

Answer 2

試試這個

var lastHoveredItem = null, hoveredOnMegaMenu = false; 
$("#navRollOver > li > a").mouseenter(function(){ 
    hoveredOnMegaMenu = false; 
    var $this = $(this); 
    if(lastHoveredItem != null){ 
     lastHoveredItem.slideUp(); 
    } 
    //Now based on the menu hovered you can find its its associated mega menu container 
    lastHoveredItem = $(".megaMenu" + $this.attr('title')).slideDown(); 
}) 
.mouseleave(function(){ 
    setTimeout(function(){ 
     if(!hoveredOnMegaMenu && lastHoveredItem){ 
      lastHoveredItem.slideUp(); 
      lastHoveredItem = null; 
     } 
    }); 
}); 

//You can give megaMenu class to each of the mega menu containers so that we can 
//easily select them with class selector 
$(".megaMenu").mouseenter(function(){ 
    hoveredOnMegaMenu = true; 
}) 
.mouseleave(function(){ 
    $(this).slideUp(); 
    lastHoveredItem = null; 
});