javascript - 悬停打开子菜单上的 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');
      });
    }
  });
});

但是，当我将鼠标悬停在菜单 1 上时，菜单 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