悬停打开子菜单上的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>

我的想法是,如果Node有子节点,那么子菜单将打开.因此,在这种情况下,如果用户在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');
    });
});

工作实例