使用jQuery在悬停/鼠标移出时显示/隐藏下拉菜单

Question

我有一个简单的导航栏，其中有一个下拉菜单，当用户将鼠标悬停在“更多”选项卡上时，会显示出来。我希望当用户将鼠标移开类别 div 时隐藏下拉菜单。

问题是当用户将鼠标移到 ul li 上时，下拉菜单会关闭。如何设置函数，使其忽略类别 div 中的 ul li。尝试了 categories > *，但没有效果。

<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"); 
});

- Jung

Answer 1

$(document).ready(function () {

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

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

- Sveisvei

Answer 2

最简单的方法是在没有使用jQuery的情况下实现：将下拉列表放置在触发元素中（例如，在导航列表中的列表项中放置下拉列表）。

如果您想要更不直接的解决方案，mouseleave 可能会有所帮助。

- Alan Plum

Answer 3

Jquery的hover插件包括mouseenter和mouseleave函数，以下代码对我来说运行良好。

javascript:

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

- Veeresh Honnaraddi

Answer 4

这可能会有所帮助！首先隐藏 "sub_menu"。

//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();
        });

- bluwater2001

Answer 5

一些要点：

• put the div inside of the "#moretab" so that mousing from the menu back to the "more" won't close it.

• add a delay from mouseleave, which is a preferable user experience

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

- lars