水平下拉菜单使用jquery和hoverintent

Question

我想实现一个使用jquery和hoverintent的水平下拉菜单。我几乎已经知道了，但是当您将鼠标从包含下拉链接的“li”移动到topnav中的另一个“li”时，菜单就会停留在那里。

目标：
单击鼠标右键触发下拉菜单
- 菜单高度扩展其推动网页内容下推
- 如果您移动鼠标关闭子菜单或-submenu出现
链接关闭触发器li，菜单应该消失

现在，只要鼠标位于菜单上的任何位置，子菜单仍然可见。

我试着在这里修改代码，但我的工作不像这个例子，我不知道为什么。
HoverIntent jQuery plugin initiated by a click event

我的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> 

MY JQUERY：

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 
}) 

Answer 1

您拍照时看看快鱼？

http://users.tpg.com.au/j_birch/plugins/superfish/