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

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

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

1 个答案: