Question

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

目标：
- 单击触发下拉菜单的链接
-menu height扩展，将页面内容向下推 -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

你看过Superfish吗？

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

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

1 个答案: