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

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>

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

感谢您的帮助!

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

Answer 1

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

jsFiddle here.

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