Перебирать неупорядоченный список (nav)

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>

Я звоню div с классом subNavContainerСтатус CSS display: none;

Это то, что я хочу сделать... Я планирую получить массив всех li и цель > a и слушать событие ввода мыши, чтобы вызвать мегаменю slideDown,

Мне нужна помощь с итерацией по li проверка, если есть a и на основе mouseenter на a Я хочу вызвать событие для отображения megaMenu с помощью slideDown, and when the mouse moves to the next()a, I want to trigger the slideUp событие.

Similarly if the mouseenters the subNavContainer it should remain on screen and when the mouseleaves the subNavContainer or if there is no movement on the screen the 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
});