afficher/masquer le menu déroulant sur hover/mouseout en utilisant jquery

Question

donc j'ai une barre de navigation simple avec un menu déroulant pour quand un utilisateur passe sur l'onglet plus. je veux cacher le menu déroulant lorsque l'utilisateur se déplace hors des catégories div.

problème est que lorsque l'utilisateur souris dans un ul li, la liste déroulante se ferme. comment puis-je le mettre de sorte que la fonction ignore le ul li dans les catégories div. catégories essayées> * mais n'a pas fonctionné.

<div id="navbar"> 
    <ul> 
    <li>tab1</li> 
    <li>tab2</li> 
    <li id="moretab">more</li> 
    </ul> 
</div> 
<div id="categories"> 
    <ul> 
    <li>cats</li> 
    <li>dogs</li> 
    </ul> 
</div> 

$("#moretab").hover(function(){ 
    $("#categories").css("visibility","visible"); 
}); 
$("#categories").mouseout(function() { 
    $("#categories").css("visibility","hidden"); 
}); 

Answer 1

La meilleure réponse est la façon dont vous le feriez sans jQuery: mettre le menu déroulant dans l'élément de déclenchement (liste déroulante par exemple dans un élément de liste dans la liste de navigation).

Si vous voulez quelque chose de moins simple, mouseleave pourrait aider.

Answer 2

$(document).ready(function() { 

    $("#moretab").mouseenter(function(){ 
    $("#categories").show(); 
    }); 

    $("#categories, #moretab").mouseleave(function(){ 
    $("#categories").hide(); 
    }); 
}); 

Answer 3

Cela pourrait aider! Cacher le "sub_menu" en premier.

//html 

<ul> 
<li id = "menu"> <a href ="#"> Settings </a> 
    <ul id = "sub_menu"> 
    <li> <a href ="#"> page 1</a></li> 
    <li> <a href ="#"> page 2</a></li> 
    </ul> 
</li> 
<li>SomeLink</li> 
<li>SomeLink 2</li> 
</ul> 

//Javascript 

     $("#menu").hover(function() { 
      $("#sub_menu").show(); 
     }, function() { 
      $("#sub_menu").hide(); 
     }); 

Answer 4

Peu de choses:

• mis la div à l'intérieur de la « #moretab » afin que mousing dans le menu Retour à la « plus » ne sera pas le fermer.

• ajouter un délai de mouseleave, qui est une expérience utilisateur préférable

  <div id="navbar"> 
      <ul> 
       <li>tab1</li> 
       <li>tab2</li> 
       <li id="moretab">more 
        <div id="categories"> 
         <ul> 
          <li>cats</li> 
          <li>dogs</li> 
         </ul> 
        </div> 
       </li> 
      </ul> 
  </div> 
  
  <script type="text/javascript"> 
  $(document).ready(function(){ 
  
  $("#moretab").hover(function(){ 
      $("#categories").slideDown("fast"); 
      clearTimeout(debounce); 
  }); 
  
  $("#moretab").mouseleave (function() { 
      debounce = setTimeout(closeMenu,400); 
  }); 
  
  var debounce; 
  var closeMenu = function(){ 
      $("#categories").slideUp("fast"); 
      clearTimeout(debounce); 
  } 
  
  }); 
  </script> 
  

Answer 5

plugin vol stationnaire Jquery inclut à la fois mouseenter et la fonction mouseleave et code suivant fonctionne très bien pour moi.

javascript:

$(document).ready(function(){ 
    $('.dropdown').hover(
    function(){ 
     $(this).children('.sub-menu').slideDown('fast'); 
    }, 
    function() { 
     $(this).children('.sub-menu').slideUp('fast'); 
    }); 
});