jQuery菜单悬停时打开子菜单

Question

我正在尝试设计类似以下的东西：

<ul class="top">
  <li><a href="#">Menu1</a></li>
  <li>
    <a href="#">Menu2</a>
    <ul class="sub">
      <li><a href="#">SubMenu1</a></li>
      <li>
        <a href="#">SubMenu2</a>
        <ul class="subsub">
          <li><a href="#">SubSubMenu1</a></li>
          <li><a href="#">SubSubMenu2</a></li>
        </ul>
      </li>
      <li><a href="#">SubMenu3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu3</a></li>
</ul>

我的想法是，如果节点有子节点，则子菜单将打开。因此，在这种情况下，如果用户将鼠标悬停在Menu2上，则SubMenu1、SubMenu2和SubMenu3将出现，如果用户将鼠标悬停在SubMenu2上，则SubSubMenu1和SubSubMenu2将出现。

目前我有以下jQuery：

$(document).ready(function () {
  $("ul.top li").hover(function () { //When trigger is hovered...
    if ($("ul.top li").hasClass("sub")) {
      $(this).parent().find("ul.sub").slideDown('fast').show();
      $(this).parent().hover(function () {}, function () {
        $(this).parent().find("ul.sub").slideUp('slow');
      });
    }
  });
});

然而，当我悬停在菜单1上时，菜单2的子菜单仍然会打开。

非常感谢您的帮助！

- JMon

---

添加你的CSS，最好制作一个JSFiddle。 - Praveen

你确定要使用 $(this).parent().find() 而不是 $this.find() 吗？因为前者会一直向上寻找，直到顶端然后下来搜索 ul.sub。 - dash

为什么要使用JavaScript来控制菜单？有大量的CSS菜单可供选择，即使用户禁用了JavaScript也可以工作。http://css3menu.com/ - user2417483

我希望用Jquery来实现。 - JMon

请查看此链接：http://stackoverflow.com/questions/8228224/jquery-menu-toggleslide-with-hover - Sheetal

Answer 1

你有几个问题需要解决。首先，你应该为 hover() 函数提供两个参数，第一个是 onmouseenter 的函数，另一个是 onmouseleave 的函数。

接下来，只需给所有子菜单打上相同的类，例如 sub。这将使你的选择器编写更加容易。

使用 children() 函数仅对用户悬停在其上的项目的直接子元素应用动画。

$(document).ready(function () {
    $("ul.top li").hover(function () { //When trigger is hovered...
        $(this).children("ul.sub").slideDown('fast');
    }, function () {
        $(this).children("ul.sub").slideUp('slow');
    });
});

工作示例

- cfs

---

这个答案与这篇帖子有何不同 http://stackoverflow.com/questions/8228224/jquery-menu-toggleslide-with-hover - Sheetal

为什么当鼠标在左右移动时，它有时会上下跳动？顺便说一句，你的逻辑很不错。我给你点赞了。 - Manish Kumar