3

我有一个菜单，如下所示。我希望第一级孩子出现在悬停或点击时（因此它也适用于 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(); 
});
4

2 回答 2

3

通过直接定位来尝试以下解决方案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();
    }
);

检查小提琴

于 2012-07-04T17:11:56.613 回答
0

这是未经测试的..您必须对其进行一些扩展。

$('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 元素中，有时将其放置为同级元素...

于 2012-07-04T16:00:42.377 回答