Le menu jQuery est rompu lors du déplacement entre les éléments de la liste.

Question

J'ai créé un menu horizontal jQuery personnalisé avec des menus déroulants. Initialement, il a simplement perdu un sous-menu lorsque vous étiez en train de planer sur un élément de la liste, et l'a évanoui lorsque vous vous êtes éloigné.

Cependant, je veux créer un effet où si vous déplacez la souris hors du sous-menu, il ne disparaît pas instantanément (par exemple si vous dépassez un pixel). J'ai été mis au courant du plugin hoverIntent dans une question précédente, mais il a un retard ennuyeux lors de l'ouverture des sous-menus frères et soeurs. Je suis donc parti de zéro avec mes propres fonctionnalités en tête.

Mon HTML est une liste standard imbriquée, ul # menu> li> ul> li. Mon Javascript est la suivante:

var menuVisible = false; 
var cancelTimeout = false; 

$(document).ready(function(){ 
    $('ul#menu > li').hover(
    function(){ 
     menuMouseOver($(this)); 
    }, 
    function(){ 
     menuMouseOut($(this)); 
    } 
); 
}); 

function menuMouseOver($li) 
{ 
    // if one of the menus is down, check which one we're hovering 
    if (menuVisible) { 
    cancelTimeout = true; 
    if ($li.find('>ul').css('display') == 'block') { 
     // do nothing if we're hovering over current menu 
    } 
    else { 
     // turn off all menus 
     $li.parent().find('>li').each(function() { 
     menuOff($li) 
     }); 
    } 
    } 

    menuOn($li); 
    menuVisible = true; 
} 

function menuMouseOut($li) 
{ 
    setTimeout( 
    function(){ 
     if (!cancelTimeout) { 
     menuOff($li); 
     menuVisible = false; 
     } 
     cancelTimeout = false; 
    }, 
    2000 
); 

} 

function menuOn($li) 
{ 
    $li.css('background-position', 'left bottom'); 
    $li.find('>ul').fadeIn('fast'); 
} 
function menuOff($li) 
{ 
    $li.css('background-position', 'left top'); 
    $li.find('>ul').fadeOut('fast'); 
} 

Les choses suivantes fonctionnent:

• Déplacement sur un haut niveau li ouvre le sous-menu.
• S'éloigner du sous-menu le ferme après 2 secondes (à des fins de test, sera réduit dans la version finale).
• Se éloigner du sous-menu et annule le délai d'attente de retour et arrête donc le menu de disparaître

Cependant, ceux-ci ne fonctionnent pas:

• Lors du déplacement d'une liste de haut niveau article à l'autre, le sous-menu précédent ne disparaît pas. Je veux qu'il disparaisse tout de suite, sans le délai normal.
• Si je parcours deux éléments de liste de niveau supérieur, menuVisible est défini sur false, ce qui dévisse le système. Cela est dû au fait que cancelTimeout est défini sur true lorsque vous passez sur le premier frère, et c'est toujours vrai lorsque vous passez au deuxième frère.

J'aimerais savoir pourquoi cela se produit et, bien sûr, comment y remédier.

Answer 1

Avez-vous essayé le plugin jQuery Superfish?

Je l'ai utilisé dans mon projet et je pense qu'il va résoudre ces problèmes pour vous.