Question

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

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/

感谢您的帮助！

更新：解决方案可在此处找到＆gt;＆gt; 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');});

Answer 1

是的，在这种情况下，您可以使用后代选择器 - $('#menu-lateral li a')作为您的选择器，而不是您当前使用的直接子选择器 - $('#menu-lateral > li > a')。

jsFiddle here.

由于您现在正在使用后代选择器，所有未来的降级“级别”将在$(this).siblings('.sub-menu').slideToggle('slow');语句中单独定位，使其非常容易扩展。

jQuery .toggle（）显示和隐藏子子菜单

1 个答案: