悬停或单击时的 Jquery 下拉菜单

Question

我有一个如下所示的菜单。我希望第一级子级出现在悬停或单击时(因此它也适用于 iPad)。当悬停(或单击)第一级子级时，我希望它的第二级子级出现(如果存在)。将鼠标悬停或单击不同的 DOM 元素时，所有子菜单都应再次隐藏。

此外，当用户在页面上时，我希望菜单能够展开，直到他将鼠标悬停在不同的菜单项上或单击不同的菜单项，以便他始终可以看到自己在导航中的位置。

我正在 WordPress 中为一位 friend 构建这个，他应该能够使用后端创建和更改他的导航菜单。因此，向某些元素添加特定的类或 ID 并不是一种选择。

<style>
.sub-menu {display: none;}
</style>


<ul class="menu">
  <li>child 1
    <ul class="sub-menu">
      <li>child 1.1
        <ul class="sub-menu">
          <li>child 1.1.1</li>
          <li>child 1.1.2</li>
        </ul>
      </li>
      <li>child 1.2
        <ul class="sub-menu">
          <li>child 1.2.1</li>
          <li>child 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>child 2
    <ul class="sub-menu">
      <li>child 2.1</li>
      <li>child 2.2</li>
    </ul>
  </li>
</ul>

这是我想出来的，但它不起作用。将鼠标悬停在子项 1.1 上时，会显示 1.1 和 1.2 的同级项。

$("ul.menu li").hover(function() { 
    $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
} , function() {  
    $(this).find("ul.sub-menu").hide(); 
});

$("ul.menu li ul.sub-menu").hover(function() { 
    $(this).find("ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
});

Answer 1

通过直接定位 ul 尝试以下解决方案

解决方案 A:

<小时/>

//  previous (following) is very inefficient and slow:
//   -- $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
//  Rather, target the exact ULs which are Direct Children

$("ul.menu").find('li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').slideUp();
        //  If something Slides Down, it should slide up as well,
        //  instead of plain hide(), your choice - :)
    }
);

解决方案 B:

<小时/>

比两个 UL 更精确

更新:解决方案 A 工作正常，但使 B 变得多余

$("ul.menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

$("ul.sub-menu").find('> li').hover(
    function() {
        $(this).find('> ul').slideDown();
    },
    function() {
        $(this).find('> ul').hide();
    }
);

检查Fiddle