parcourir une liste non ordonnée (nav)

Question

Je travaille sur un Mega Menu et en utilisant une liste non ordonnée pour déclencher un événement pour afficher le menu Mega. Voici le code HTML pour la barre de navigation:

<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> 

J'appelle une div avec classe subNavContainer, le statut de CSS est display: none;

C'est ce que je veux faire ... Je prévois d'obtenir le tableau de tous les li et la cible > a et écouter l'événement entrer souris pour déclencher le menu méga à slideDown.

je besoin d'aide Itère la li vérifier si elle a a et sur la base mouseenter sur a Je veux déclencher un événement pour afficher la megaMenu en utilisant slideDown, et quand la souris se déplace vers la next()a, je veux déclenche l'événement slideUp.

De même, si les mouseenters l'subNavContainer il doit rester à l'écran et lorsque les mouseleaves du subNavContainer ou s'il n'y a pas de mouvement sur l'écran du subNavContainer devrait slideUp.

Answer 1

Pour sélectionner tous les liens qui sont les enfants des li éléments de votre sélecteur peut ressembler à ceci:

//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') 

Pour lier ensuite à l'événement mouseenter pour les éléments:

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

Puis slideUp le menu après le curseur quitte les éléments de liaison:

//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

Essayez cette

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