mostrar/ocultar el menú desplegable al pasar el mouse/mouseout usando jquery

Question

así que tengo una barra de navegación simple con un menú desplegable para cuando un usuario se desplaza en la pestaña más. Quiero ocultar el menú desplegable cuando el usuario se desplaza fuera de las categorías div.

problema es que cuando el usuario se desplaza a un ul li, el menú desplegable se cierra. ¿Cómo puedo configurarlo para que la función ignore el ulli dentro de las categorías div? categorías probadas> * pero no funcionó.

<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 respuesta más fácil es la forma en que lo haría sin jQuery: poner en el menú desplegable en el elemento de activación (por ejemplo, la lista desplegable en un elemento de lista en la lista de navegación).

Si quiere algo menos sencillo, mouseleave podría ayudar.

Answer 2

$(document).ready(function() { 

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

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

Answer 3

Esto podría ayudar! Ocultar el "sub_menu" primero.

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

Pocas cosas:

• poner el div interior de la "#moretab", por lo que pasar el ratón en el menú de nuevo a la "más" no cerrarla.

• añadir un retardo de mouseleave, que es una experiencia de usuario preferible

  <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

jQuery plugin de vuelo estacionario incluye tanto MouseEnter y función mouseleave y siguiente código funciona bien para mí.

javascript:

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