jQuery 切换 ul 多级答案

【问题标题】：Jquery toggle ul multi levelsjQuery 切换 ul 多级
【发布时间】：2014-07-28 11:09:11
【问题描述】：

如何切换多级导航。

我尝试使用 find ul 这个，但它会打开每个子菜单级别。这是我的代码：

HTML

<ul class="level_1">
<li class="submenu">sumenu
<ul class="level_2">
    <li class="submenu">level2
        <ul class="level_3">
        <li>level3</li>
        </ul>
    </li>
</ul>
</li>
</ul>

这是我的 CSS

.submenu ul {
    display:none;
}

这是我的 Jquery 代码

$( ".submenu" ).hover(function() {
  $( this).find("ul").toggle( "slow" );
});

所以我想要的是，当我悬停 level_1 时，它应该只打开 level_2，当我悬停在 level_2 时，它应该打开 level_3。

JsFiddle

【问题讨论】：

标签： jquery navigation toggle

【解决方案1】：

您需要使用 .children() 来获取直系子级。而不是.find()，它得到后代（也是孩子的孩子）

代码

$(".submenu").hover(function () {
    $(this).children("ul").toggle("slow");
});

DEMO

【讨论】：

也可能最好将其拆分为mouseover 和mouseout 并分别使用show 和hide。这会给你另一个编辑 Satpal ：P
那么，如果我想为此使用点击功能，当我点击 level_2 时，我该如何处理让 level_1 保持打开状态？ jsfiddle.net/E4Vy8/1
好的找到解决方案 $('li').click(function(ev) { $(this).find('>ul').slideToggle(); ev.stopPropagation(); }) ;

【解决方案2】：

试试这个，希望对你有帮助：

$( ".submenu" ).hover(function() {
  $( this).children("ul").first().toggle( "slow" );
});

【讨论】：