JavaScript的onclick导航（多层） - 我如何分开父母和孩子点击？

Question

http://jsfiddle.net/kGw8y/1602/

$('#global-nav li:has(ul)').click(function(){ 
    $(this).find('> ul').stop().slideToggle(400); 
}); 

我发现这原来是使用悬停;不过，我修改了它，而不是点击。如果你看代码，孩子“网站”也有链接，但是当你点击“网站”时，它也会激活关闭它的主导航。

如何将“父”与“子”点击分开？我更喜欢这是一个简单的代码，可以在多层下工作，而无需添加更多和更多的代码。

另外，我如何添加一个元素到这个代码中，如果顶层“子”在它下面有链接，它会添加一个箭头（仍然在黑色区域），当点击时，箭头旋转到一个向下的位置。然后，当未选中时，箭头指向右侧。

感谢您的帮助。

---

编辑

如何使这项工作的按钮，其菜单按钮下拉导航导航之外？

代码：

<a id="menu_button" class="hidecontent_full hidecontent_condensed" href="#">Menu</a> 

<div class="nav"> 
<ul> 
<li class="first"><a href="#">New?</a> 
    <ul> 
    <li><a href="welcome.php">Welcome</a></li> 
    <li><a href="whoweare.php">Who We Are</a></li> 
    <li><a href="whatwebelieve.php">What We Believe</a></li> 
    <li><a href="whenandwhere.php">When and Where</a></li> 
    <li><a href="staff.php">Crossroads Staff</a></li> 
    <li><a href="contact.php">Contact</a></li> 
    </ul> 
</li> 
<li><a href="#">Next Steps</a> 
    <ul> 
    <li><a href="nextsteps.php">What is Next Steps?</a></li> 
    <li><a href="connect.php">Connect</a></li> 
    <li><a href="grow.php">Grow</a></li> 
    <li><a href="serve.php">Serve</a></li> 
    </ul> 
</li> 
<li><a href="#">Ministries</a> 
    <ul> 
    <li><a href="kidz.php">Childrens Ministry</a></li> 
    <li><a href="fused.php">Student Ministry</a></li> 
    <li><a href="connectgroups.php">Connect Groups</a> 
    <li><a href="musicministry.php">Music Ministry</a></li> 
    <li><a href="prayerrequests.php">Prayer Requests</a></li> 
    </ul> 
</li> 
<li><a href="#">Resources</a> 
    <ul> 
    <li><a href="sermonarchives.php">Sermon Archives</a></li> 
    <li><a href="ccb.php">Church Community Builder</a></li> 
    <li><a href="parents.php">Parents</a></li> 
    <li><a href="Biblereadingplans.php">Bible Reading Plans</a></li> 
    <li><a href="recommendedbooks.php">Recommended Books</a></li> 
    </ul> 
</li> 
<li class="last"><a href="#">Events</a> 
    <ul> 
    <li><a href="merge.php">Merge</a></li> 
    <li><a href="Christmasonthefarm.php">Christmas on the Farm</a></li> 
    <li><a href="lovecamedown.php">Love Came Down</a></li> 
    <li><a href="dinnerfor8.php">Dinner for 8</a></li> 
    <li><a href="calendarofevents.php">Calendar of Events</a></li> 
    </ul> 
</li> 
<li><a href="#">Give</a> 
    <ul> 
    <li><a href="howtogive.php">How to Give</a></li> 
    </ul> 
</li> 

</ul> 
</div> <!-- navigation --> 

Answer 1

返回false保持事件从通过DOM鼓泡和触发其他选择的元件。

编辑II

的代码是真的一样，虽然：

LAST FIDDLE

NEW JSFIDDLE

OLD JSFIDDLE

JS

$('#global-nav li:has(ul)').click(function(){ 
    $(this).find('> ul').slideToggle(400); 
}); 

$('#menu_button').on('click', function() { 
    $(this).toggleClass('open'); 
}); 

CSS

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 
#menu_button { 
    display: inline-block; 
    padding: 15px; 
    width:200px; 
    background:#444; 
    color: white; 
} 
#global_nav { 
    display: none; 
} 
.open ~ #global-nav { 
    display: block; 
    width:200px; 
    background:#444; 
} 

#global-nav li a{ 
    padding:15px; 
} 
#global-nav a{ 
    display:block; 
    color:#fff; 
} 
#global-nav ul ul{ 
    display:none; 
    background:#000; 
} 
#global-nav ul ul a:hover{ 
    background:#222; 
} 

HTML

<a id="menu_button" class="hidecontent_full hidecontent_condensed" href="#">Menu</a> 

<div id="global-nav"> 
<ul> 
<li class="first"><a href="#">New?</a> 
    <ul> 
    <li><a href="welcome.php">Welcome</a></li> 
    <li><a href="whoweare.php">Who We Are</a></li> 
    <li><a href="whatwebelieve.php">What We Believe</a></li> 
    <li><a href="whenandwhere.php">When and Where</a></li> 
    <li><a href="staff.php">Crossroads Staff</a></li> 
    <li><a href="contact.php">Contact</a></li> 
    </ul> 
</li> 
<li><a href="#">Next Steps</a> 
    <ul> 
    <li><a href="nextsteps.php">What is Next Steps?</a></li> 
    <li><a href="connect.php">Connect</a></li> 
    <li><a href="grow.php">Grow</a></li> 
    <li><a href="serve.php">Serve</a></li> 
    </ul> 
</li> 
<li><a href="#">Ministries</a> 
    <ul> 
    <li><a href="kidz.php">Childrens Ministry</a></li> 
    <li><a href="fused.php">Student Ministry</a></li> 
    <li><a href="connectgroups.php">Connect Groups</a> 
    <li><a href="musicministry.php">Music Ministry</a></li> 
    <li><a href="prayerrequests.php">Prayer Requests</a></li> 
    </ul> 
</li> 
<li><a href="#">Resources</a> 
    <ul> 
    <li><a href="sermonarchives.php">Sermon Archives</a></li> 
    <li><a href="ccb.php">Church Community Builder</a></li> 
    <li><a href="parents.php">Parents</a></li> 
    <li><a href="Biblereadingplans.php">Bible Reading Plans</a></li> 
    <li><a href="recommendedbooks.php">Recommended Books</a></li> 
    </ul> 
</li> 
<li class="last"><a href="#">Events</a> 
    <ul> 
    <li><a href="merge.php">Merge</a></li> 
    <li><a href="Christmasonthefarm.php">Christmas on the Farm</a></li> 
    <li><a href="lovecamedown.php">Love Came Down</a></li> 
    <li><a href="dinnerfor8.php">Dinner for 8</a></li> 
    <li><a href="calendarofevents.php">Calendar of Events</a></li> 
    </ul> 
</li> 
<li><a href="#">Give</a> 
    <ul> 
    <li><a href="howtogive.php">How to Give</a></li> 
    </ul> 
</li> 

</ul> 
</div> <!-- navigation --> 

Answer 2

您需要event.stopPropagation()在点击：

$('#global-nav li:has(ul)').click(function(e){ 
    e.stopPropagation(); // it stops the event to bubble up to the parent elems 
    $(this).find('> ul').stop().slideToggle(400); 
});