我正在尝试使用 jquery 和 hoverintent 实现水平下拉菜单。我几乎搞定了，但是当您将鼠标从包含下拉链接的“li”移到顶部导航中的另一个“li”时，菜单会停留在那里。
目标：-
单击触发下拉菜单的链接-
菜单高度扩展，将页面内容向下
推-子菜单出现
-如果您将鼠标移出子菜单或触发器li，菜单应该消失
现在，只要您的鼠标在菜单上的任何位置，子菜单仍然可见。
我尝试在此处修改代码，但我的代码不像示例那样工作，我不知道为什么。
点击事件发起的 HoverIntent jQuery 插件
我的 HTML：
<div id="menu">
<ul id="topnav">
<li class="border"><a class="topnavlink" href="#">Main Link</a></li>
<li class="border"><a class="topnavlink" href="#">Main Link</a></li>
<li class="border"><a class="topnavlink" href="#">Main Link</a></li>
<li class="border"><a class="topnavlink" href="#">Main Link</a>
<ul id="subnav">
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
<li><a class="subnavlink" href="#">Drop Down Link</a></li>
</ul>
</li>
<li class="border"><a class="topnavlink" href="#">Main Link</a></li>
<li class="border"><a class="topnavlink" href="#">Main Link</a></li>
<li class="border"><a class="topnavlink" href="#">Main Link</a></li>
<li class="noborder"><a class="topnavlink" href="#">Main Link</a></li>
</ul>
</div>
我的查询：
function slideDown() {
$(this).click(function() {
$("#menu").stop().animate({height:"68px"}, 200);
$("ul#subnav").slideDown(200)
});
}
function slideUp() {
$("ul#subnav").slideUp(200);
$("#menu").stop().animate({height:"40px"}, 200);
}
$("ul#topnav").hoverIntent({
sensitivity: 7,
interval: 100,
over: slideDown,
timeout: 500,
out: slideUp
})