jQuery .toggle()显示和隐藏子子菜单

2019年8月4日 267次阅读

我正在使用这个问题的代码进行显示/隐藏切换

jQuery .toggle() to show and hide a sub-menu

$('#menu-lateral .sub-menu').hide(); //Hide children by default

$('#menu-lateral > li > a').click(function() {
    event.preventDefault();
    $(this).siblings('.sub-menu').slideToggle('slow');
});

问题是我的子菜单有自己的子菜单,包含许多项目.有没有办法让这个代码在下一个级别上工作？

重要信息：wordpress默认使用具有相同类的子UL,因此两者都是.sub-menu.

喜欢：

<ul id="menu-lateral" class="menu">
    <li id="menu-item-29"><a href="#">Parent Level 1</a>
        <ul class="sub-menu">
            <li id="menu-item-108"><a href="#">Parent Level 2</a>
                <ul class="sub-menu">
                    <li id="menu-item-104"><a href="#">Element</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

小提琴：http://jsfiddle.net/qfygM/1/

谢谢您的帮助！

更新：解决方案可以在这里找到>> http://jsfiddle.net/qfygM/7/

由Zenith制造.

$('#menu-lateral .sub-menu').hide(); //Hide children by default

$('#menu-lateral li a').click(function(event){
if ($(this).next('ul.sub-menu').children().length !== 0) {     
    event.preventDefault();
}
$(this).siblings('.sub-menu').slideToggle('slow');});

最佳答案 是的,在这种情况下,您可以使用后代选择器 – $(‘#menu-lateral li a’)作为您的选择器,而不是您当前使用的直接子选择器 – $(‘#menu-lateral> li > a’).

jsFiddle here.

正如您现在使用的是后代选择器,所有未来的降级’级别’将在$(this).siblings(‘.子菜单’)中单独定位.slideToggle(‘slow’);声明,使其非常容易扩展.

点赞