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

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

jQuery .toggle() 显示和隐藏子菜单 https://stackoverflow.com/questions/9469807/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。

Like:

<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>

Fiddle: http://jsfiddle.net/qfygM/1/ http://jsfiddle.net/qfygM/1/

谢谢您的帮助！

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

由真力时制造。

$('#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 在这里。 http://jsfiddle.net/qfygM/2/

由于您现在使用的是后代选择器，因此所有未来的降序“级别”都将在您的$(this).siblings('.sub-menu').slideToggle('slow');声明，使其非常容易扩展。