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

所以我有一个简单的导航栏，当用户在更多选项卡上悬停时，可以使用下拉菜单。我想隐藏下拉菜单，当用户鼠标移出分类div。使用jquery显示/隐藏悬停/鼠标悬停下拉菜单

问题是，当用户将鼠标放入ul里时，下拉框关闭。我如何设置它，以便函数忽略类别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"); 
});

来源

2009-06-12 Jung

最简单的答案是，你会怎么做没有jQuery的：把下拉菜单中的触发元件（例如下拉列表列表项在导航列表）。

如果你想要更简单的东西，mouseleave可能会有所帮助。

来源

2009-06-12 21:23:03

鼠标离开正是我一直在寻找。谢谢！ – Jung 2009-06-12 21:43:08

$(document).ready(function() { 

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

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

来源

2009-06-12 21:24:51 Sveisvei

这可能有帮助！首先隐藏“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(); 
     });

来源

2012-07-25 21:32:43 bluwater2001

几件事情：

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

来源

2012-07-25 22:55:34 lars

jQuery的悬停插件包括了mouseenter和鼠标离开功能，下面的代码为我工作得很好。

的javascript：

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

来源

2014-12-30 11:33:42

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

回答

相关问题