使用jQuery在鼠标悬停时显示/隐藏下拉菜单 [英] show/hide dropdown menu on hover/mouseout using jquery
问题描述
因此,当用户将鼠标悬停在更多"选项卡上时,我有一个带有下拉菜单的简单导航栏.当用户将鼠标从div类别中移出时,我想隐藏下拉菜单.
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中的ul.尝试了类别> *,但没有用.
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.
<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的情况下如何做:将下拉列表放到触发元素中(例如,下拉列表位于导航列表中的列表项中).
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).
如果您想要简单一些的内容,mouseleave
可能会有所帮助.
If you want something less straightforward, mouseleave
might help.
这篇关于使用jQuery在鼠标悬停时显示/隐藏下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!