使用 jquery 和 hoverintent 的水平下拉菜单答案

【问题标题】：horizontal drop-down menu using jquery and hoverintent使用 jquery 和 hoverintent 的水平下拉菜单
【发布时间】：2011-04-07 19:12:15
【问题描述】：

我正在尝试使用 jquery 和 hoverintent 实现水平下拉菜单。我几乎搞定了，但是当您将鼠标从包含下拉链接的“li”移开到顶部导航中的另一个“li”时，菜单会保留在那里。

目标：
-单击触发下拉菜单的链接
- 菜单高度扩展，将页面内容向下推
-子菜单出现
- 如果您将鼠标移出子菜单或触发器 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>

我的查询：

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

【问题讨论】：

标签： jquery drop-down-menu hoverintent

【解决方案1】：

你看过Superfish吗？

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

【讨论】：

我玩了几分钟的超级鱼，但对于一个下拉菜单来说似乎有点过头了。