可摺疊的jQuery下拉菜單 - 停止事件傳播

Question

我一直在努力使Wordpress自定義主題響應。由於它們用於多站點安裝的方式，我覺得最好的方法是讓主菜單變成可摺疊的小屏幕下拉菜單。 我是一個jQuery新手，但經過一些失敗的嘗試後，我設法寫我自己的腳本，使用父/子控制可摺疊菜單。 所以這是我的問題。當沒有子菜單的項目時，有沒有一種方法可以讓jQuery檢測到沒有子元素，並允許點擊鏈接來代替？
這裏是我的代碼：

<a href="#navigation" class="mobile-nav-link">Navigation</a> 
<nav id="access" class="menu" role="navigation"> 
<div id="nav-wrap-mobile"> 
<div id="nav-wrap-sub-mobile"> 
<div class="menu-main-menu-2-container"> 
<ul id="menu-main-menu-5" class="menu"> 
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37"><a href="http://link.to.thing">Parent 1</a> 
<ul class="sub-menu"> 
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1877"><a href="http://link.to.thing">Child 1</a> 
</li> 
</ul> 
</li> 
</ul> 
<ul id="menu-main-menu-5" class="menu"> 
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-38"><a href="http://link.to.thing">Parent 1</a> 
<ul class="sub-menu"> 
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1879"><a href="http://link.to.thing">Child 2</a> 
</li> 
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1878"><a href="http://link.to.thing">Child 2</a> 
</li> 
</ul> 
</li> 
</ul> 
<ul id="menu-main-menu-7" class="menu"> 
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37"><a href="http://link.to.thing">No Parent</a></li> 
</ul> 
</div> 
</div> 
    </div> 
</nav> 
<!-- #access- --> 

這裏是jQuery的

jQuery(document).ready(function() { 
$('#nav-wrap-mobile').hide(); 
$('.mobile-nav-link').click(function() { 
$('#nav-wrap-mobile').toggle(); 
}); 
jQuery(document).ready(function() { 
$('ul.sub-menu').hide(); 
$('ul.menu').children().click(function(e) { 
e.preventDefault(); 
$(this).children('ul.sub-menu').toggle();}).children('ul.sub-menu').click(function (event) { 
event.stopPropagation(); 
    }); 
    }); 
    }); 

這裏有一個的jsfiddle這說明了什麼，我想說：提前

http://jsfiddle.net/nivims/S48ZV/15/

謝謝:)

Answer 1

，您可以根據需要檢查是否有子列表，補充一點：

if ($(this).children('ul').length == 0) { 
    return; 
} 

到正下方：

$('ul.menu').children().click(function (e) {