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> 

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

感谢您的帮助！

UPDATE：该解决方案可以在这里找到>>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-lateral li a')为您的选择，而不是你目前正在使用的直接孩子选择 - $('#menu-lateral > li > a')。

jsFiddle here.

正如你现在使用后代选择，未来所有的降“水平”将单独在$(this).siblings('.sub-menu').slideToggle('slow');声明的目标，从而使其很容易扩展。