使用 jquery 在悬停/鼠标悬停时显示/隐藏下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/989078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show/hide dropdown menu on hover/mouseout using jquery
提问by Jung
so i have a simple navbar with a dropdown menu for when a user hovers on the more tab. i want to hide the dropdown menu when the user mouses out of the categories div.
所以我有一个简单的导航栏，当用户将鼠标悬停在更多选项卡上时，它带有一个下拉菜单。当用户将鼠标移出类别 div 时，我想隐藏下拉菜单。
problem is that when the user mouses into a ul li, the dropdown closes. how can i set it so that the function ignores the ul li within the categories div. tried categories > * but didn't work.
问题是当用户将鼠标移入 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");
});
回答by Sveisvei
$(document).ready(function () {
$("#moretab").mouseenter(function(){
$("#categories").show();
});
$("#categories, #moretab").mouseleave(function(){
$("#categories").hide();
});
});
回答by Alan Plum
The easiest answer is how you would do it without jQuery: put the dropdown in the triggering element (e.g. dropdown list in a list item in the navigation list).
最简单的答案是不使用 jQuery 如何做到这一点：将下拉列表放在触发元素中（例如，在导航列表中的列表项中放置下拉列表）。
If you want something less straightforward, mouseleavemight help.
如果你想要一些不那么简单的东西，mouseleave可能会有所帮助。
回答by veeresh yh
Jquery hover plugin includes both mouseenter and mouseleave function and following code works fine for me.
Jquery 悬停插件包括 mouseenter 和 mouseleave 功能，以下代码对我来说很好用。
javascript:
javascript:
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown('fast');
},
function () {
$(this).children('.sub-menu').slideUp('fast');
});
});
回答by bluwater2001
This might help ! Hide the "sub_menu" first.
这可能会有所帮助！首先隐藏“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();
});
回答by lars
Few things:
几样东西：
- 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>
- 将 div 放在“#moretab”中，这样鼠标从菜单回到“more”就不会关闭它。
从 mouseleave 添加延迟，这是更好的用户体验
<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>
