使用jquery在悬停/鼠标悬停时显示/隐藏下拉菜单答案

【问题标题】：show/hide dropdown menu on hover/mouseout using jquery使用jquery在悬停/鼠标悬停时显示/隐藏下拉菜单
【发布时间】：2015-01-05 12:54:36
【问题描述】：

所以当用户将鼠标悬停在更多选项卡上时，我有一个带有下拉菜单的简单导航栏。当用户将鼠标移出类别 div 时，我想隐藏下拉菜单。

问题是当用户将鼠标移入 ul li 时，下拉菜单会关闭。我如何设置它以便函数忽略类别 div 中的 ul li。尝试了类别 > * 但没有用。

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

【问题讨论】：

标签： jquery

【解决方案1】：

$(document).ready(function () {

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

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

【讨论】：

【解决方案2】：

最简单的答案是在没有 jQuery 的情况下如何做到这一点：将下拉列表放在触发元素中（例如，将下拉列表放在导航列表中的列表项中）。

如果您想要一些不那么简单的东西，mouseleave 可能会有所帮助。

【讨论】：

【解决方案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');
    });
});

【讨论】：

【解决方案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();
        });

【讨论】：

【解决方案5】：

几件事：

将 div 放在“#moretab”中，这样鼠标从菜单回到“更多”时就不会关闭它。

添加鼠标离开的延迟，这是更好的用户体验

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

【讨论】：