Drop-Down-Menü auf Hover/Mouseout mit jQuery

Question

zeigen/verstecken, so habe ich eine einfache Navbar mit einem Dropdown-Menü für wenn ein Benutzer auf der Registerkarte mehr schwebt. Ich möchte das Dropdown-Menü ausblenden, wenn der Benutzer mauset aus dem Kategorien div.

Problem ist, dass, wenn der Benutzer in eine ul li mouses, das Dropdown schließt. wie kann ich es so einstellen, dass die Funktion das ul li innerhalb der Kategorien div ignoriert. versuchte Kategorien> * aber hat nicht funktioniert.

<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

Die einfachste Antwort ist, wie Sie es ohne jQuery tun würden: setzen Sie die Drop-down in dem Auslöseelement (z Dropdown-Liste in einem Listenelement in der Navigationsliste).

Wenn Sie etwas unkomplizierteres wollen, könnte mouseleave helfen.

Answer 2

$(document).ready(function() { 

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

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

Answer 3

Dies könnte helfen! Verstecke das "sub_menu" zuerst.

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

Nur wenige Dinge:

• gab div innerhalb des „#moretab“, so dass wieder auf die „mehr“ aus dem Menü mousing wird es nicht schließen.

• fügen Sie eine Verzögerung von mouseleave, das ist eine bevorzugte Benutzererfahrung

  <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 Hover-Plugin sowohl MouseEnter- und mouseleave-Funktion enthält und Code folgende funktioniert gut für mich.

javascript:

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