悬停打开子菜单上的jQuery菜单 [英] jQuery menu on hover open submenu

问题描述

我正在尝试设计类似以下的内容

I am trying to design something like the followingL

<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上.

And my idea is that if the Node has subNodes, then the submenu will open. So in this instance, if the user hovers on Menu2, the SubMenu1, SubMenu2, and SubMenu3 will appear, and if the user hovers on SubMenu2, SubSubMenu1, SubSubMenu2 will appear.

此刻我有以下jQuery:

I have the following jQuery at the moment:

$(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的子菜单仍在打开.

However when I hover on Menu1, the submenus for Menu 2 are still opening.

任何帮助将不胜感激！

推荐答案

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

You have a couple of issues that need to be resolved. First, you should provide two arguments to the hover() function, the first is a function for onmouseenter, the other is for onmouseleave.

接下来，只需标记具有相同类的所有子菜单，例如sub.这将使编写选择器更加容易.

Next, just tag all sub menus with the same class, e.g., sub. This will make writing you selectors much easier.

使用 children()函数仅将动画应用到直接用户将鼠标悬停.

Use the children() function to only apply the animation to direct children of the item that the user is hovering over.

$(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菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！