jQuery hover() masquer/afficher provoquant le rebond

Question

C'est un simple menu cacher/afficher: Lorsque vous passez la souris sur un élément de liste, le script affiche toutes les listes non ordonnées qui sont enfants de cet élément de liste, puis affiche. Le CSS met cette sous-liste à la droite immédiate de l'élément de liste plané. Lorsque vous quittez la souris, il masque à nouveau cette liste non ordonnée.

Le code HTML:

<div class="menu-header-category-menu-container"> 
    <ul id="menu-header-category-menu" class="menu"> 
    <li id="menu-item-58"><a href="?cat=3">Parent Category I</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-59"><a href="?cat=6">Child Category I</a></li> 
     <li id="menu-item-60"> 
      <a href="?cat=7">Child Category II</a> 
      <ul class="sub-menu"> 
      <li id="menu-item-61"><a href="?cat=9">Grandchild Category I</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li id="menu-item-62"><a href="?cat=4">Parent Category II</a></li> 
    <li id="menu-item-63"> 
     <a href="?cat=5">Parent Category III</a> 
     <ul class="sub-menu"> 
     <li id="menu-item-64"><a href="?cat=8">Child Category III</a></li> 
     </ul> 
    </li> 
    <li id="menu-item-57"><a href="?cat=1">Uncategorized</a></li> 
    </ul> 
</div> 

Le CSS:

li { 
    width: 150px; 
    border: 1px solid black; 
    background-color: aqua; 
    list-style-type: none; 
    position: relative; 
} 

ul.sub-menu { 
    position: absolute; 
    left: 110px; 
    top: 0px; 
    display: none; 
} 

Le JavaScript:

$(document).ready(function() { 
    $('li').hover(
     function() { $(this).children('ul').show('slow'); }, 
     function() { $(this).children('ul').hide('slow'); } 
    ); 
}); 

Il fonctionne principalement comme il se doit. Sauf si vous déplacez la souris au-dessus de l'élément de la liste et la laissez dans l'espace où la sous-liste doit apparaître (avant que la sous-liste ne finisse de s'afficher), vous la coincez dans une boucle répétée show/hide/show/hide le curseur de la souris.

J'ai essayé de résoudre ce problème en utilisant setTimeout() dans la fonction de l'argument mouseover et dans la fonction de l'argument mouseout. J'ai également essayé d'utiliser des conditions pour vérifier si la sous-liste est cachée dans ces arguments. Je ne vois aucune différence de performance.

Toute personne

Answer 1

Ceci est un problème commun, consultez Hover Intent

Answer 2

Je pense qu'il attire votre événement mouseout avant d'afficher le sous-menu. Essayez de modifier/masquer la vitesse pour accélérer. Mais ce n'est pas une solution.

Answer 3

Ce code évitera également les multiples rebondir

var myVar; 
$(".liveUser").on({ 
     mouseenter: function() { 
     myVar = setTimeout(function(){ //optional delay 
      //$(".userDetail").stop().hide().fadeIn(); 
       $(".userDetail").stop().hide().show(); 
       }, 400); 
     }, 
     mouseleave: function() { 
      clearTimeout(myVar); 
      //$(".userDetail").stop().fadeOut(); 
      $(".userDetail").stop().hide(); 
     } 
    });