遍历无序列表（导航）

Question

我正在开发一个超级菜单并使用无序列表来触发一个事件来显示超级菜单。 这是导航栏的 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 并基于 a 上的 mouseenter 我想触发一个事件以使用 slideDown 显示 megaMenu，以及何时鼠标移动到next()a，我想触发slideUp事件。

同样，如果鼠标进入subNavContainer，它应该保持在屏幕上，而当鼠标离开subNavContainer 或者屏幕上没有移动时，subNavContainer 应该是slideUp。

Answer 1

试试这个

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

Answer 2

要选择所有属于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
});