迭代通过无序列表（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; 
});