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');聲明的目標，從而使其很容易擴展。