悬停打开子菜单上的 jQuery 菜单

Question

我正在尝试设计如下L

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

但是，当我将鼠标悬停在 Menu1 上时，Menu 2 的子菜单仍在打开。

任何帮助将不胜感激！

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

Working Example