Question

我有一个类似下面的菜单。我希望第一级孩子出现在悬停或点击时（因此它也适用于iPad）。当悬停（或点击）第一级孩子时，如果它们存在，我希望它出现在二级孩子身上。在鼠标悬停或单击其他DOM元素时，应再次隐藏所有子菜单。

当用户在页面上时，我想要折叠菜单，直到他将鼠标悬停在其他菜单项上或点击其他菜单项，这样他就可以随时看到他在导航中的位置。

我正在Wordpress中为一位能够使用后端创建和更改导航菜单的朋友构建此功能。因此，不能在某些元素中添加特定的类或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

Answer 2

这是未经测试的......你必须稍微扩展一下。

$('ul.menu li').siblings('ul:first-child').on('click', function() {
if($(this).is(':visible')) {
    $(this).hide();
}
else {
    $(this).show(); 
}
})

$('ul.menu li').siblings('ul:first-child').hover(
function() {
    $(this).show();
},
function() {
    $(this).hide();
}
)

编辑：因为我看到你的结构不一致。有时你将一个列表放在一个li元素中，有时它被放置为一个兄弟...

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

2 个答案: