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");
});
5 个解决方案
#1
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, mouseleave
might help.
如果你想要一些不太直接的东西,mouseleave可能会有所帮助。
#2
$(document).ready(function () {
$("#moretab").mouseenter(function(){
$("#categories").show();
});
$("#categories, #moretab").mouseleave(function(){
$("#categories").hide();
});
});
#3
Jquery hover plugin includes both mouseenter and mouseleave function and following code works fine for me.
Jquery悬停插件包括mouseenter和mouseleave函数,以下代码对我来说很好。
javascript:
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown('fast');
},
function () {
$(this).children('.sub-menu').slideUp('fast');
});
});
#4
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();
});
#5
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
添加来自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>
把div放在“#moretab”里面,这样从菜单回到“more”就不会关闭它。
#1
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, mouseleave
might help.
如果你想要一些不太直接的东西,mouseleave可能会有所帮助。
#2
$(document).ready(function () {
$("#moretab").mouseenter(function(){
$("#categories").show();
});
$("#categories, #moretab").mouseleave(function(){
$("#categories").hide();
});
});
#3
Jquery hover plugin includes both mouseenter and mouseleave function and following code works fine for me.
Jquery悬停插件包括mouseenter和mouseleave函数,以下代码对我来说很好。
javascript:
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.sub-menu').slideDown('fast');
},
function () {
$(this).children('.sub-menu').slideUp('fast');
});
});
#4
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();
});
#5
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
添加来自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>
把div放在“#moretab”里面,这样从菜单回到“more”就不会关闭它。