0

我正在开发一个超级菜单并使用无序列表来触发一个事件来显示超级菜单。这是导航栏的 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>

我正在调用一个带有类的 div subNavContainer，css 状态是display: none；

这就是我想要做的......我打算获取所有li和目标的数组> a并听鼠标输入事件以触发巨型菜单slideDown。

我需要帮助通过li检查它是否具有迭代并a基于我想触发一个事件来显示using ，并且当鼠标移动到 时，我想触发该事件。mouseenteramegaMenuslideDownnext() aslideUp

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

4

2 回答 2

0

要选择作为元素子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
});
于 2012-01-23T04:47:10.910 回答
0

尝试这个

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;
});
于 2012-01-23T04:48:46.157 回答