Comment garder le menu Parent survolé lorsque la souris est dans le menu enfant dans un menu déroulant

Question

Salut les gars je me demande comment garder le menu parent plané tout en déplaçant la souris dans les sous-menus. Je suis un débutant dans jQuery et je vous aime pour m'aider avec quelques pourboire/suggestion.

LINK TO MENU WEBSITE

jQuery code

// Navigation Slide // 
var navHover = function() { 
    $("#S" + this.id).animate({top: '-40px'}, 300, 'swing') 
    $(this).animate({paddingTop: '30px'}, 300, 'swing').animate({paddingTop: '45px'}, 300, 'swing') 
    $("#I" + this.id).animate({top: '-10px'}, 300, 'swing').animate({top: '0px'}, 300, 'swing') 
} 
var navRelease = function() { 
    $("#S" + this.id).animate({top: '-130px'}, 300, 'swing'); 
} 

$('#navInside a.topLevel').hover(navHover, navRelease); 


// Dropdown animation  
      function mainmenu(){ 
      jQuery(" #navInside ul ").css({display: "none"}); // Opera Fix 
      jQuery(" #navInside li").hover(function(){ 
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(500); 
        },function(){ 
        jQuery(this).find('ul:first').css({visibility: "hidden"}); 
        }); 
      } 

      jQuery(document).ready(function(){     
       mainmenu(); 
      }); 

Navigation HTML

<div id="navInside"> 
<li><a class="topLevel" href="">Home</a></li> 
<li><a class="topLevel" href="">Options</a> 
    <ul> 
     <li><a href="">Submenu 1</a></li> 
     <li><a href="">Submenu 2</a></li> 
    </ul> 
</li> 
<li><a class="topLevel" href="">Thanks</a></li> 

Answer 1

Le problème est que votre vol stationnaire haut niveau est sur le < un élément >. Si vous passez à un sous-menu, l'événement mouseleave déclenche sur l'élément < un élément > car les éléments du sous-menu ne sont pas enfants du <a>, mais du <li>. Essayez ceci:

$('#navInside a.topLevel').parent().hover(navHover, navRelease); 

BTW - Vous pouvez simplifier votre code navHover/navRelease en utilisant le $ (ce) dans les fonctions de vol stationnaire. De cette façon, vous n'avez pas besoin d'identifiants spécifiques sur les éléments. Vous les trouverez simplement par rapport à l'élément actuel.

Answer 2

Vous n'avez pas besoin de JS pour cela. Voici le jsFiddle pour l'explication ci-dessous:

Vous voulez montrer un ul qui est l'enfant d'un li seulement quand vous planez dessus. Cela est géré par li ul (état de la souris) et li:hover ul (état mouseover). Lorsque vous passez la souris dessus, la hauteur du LI change parce que vous affichez maintenant l'UL, de sorte qu'il reste visible tant que vous ne quittez pas sa zone (LIs) (qui inclut son texte). + UL).

---

Si vous voulez des animations, regardez les transitions CSS. Le support du navigateur est inégal, mais peut-être que ce que vous essayez de faire sera supporté universellement. Juger précisément les événements mouseover/out sur des éléments dont la zone change peut être délicat. Je recommande d'utiliser JS seulement si vous avez vraiment besoin de quelque chose comme ça.