为什么jQuery的儿童选择器是针对父母？

Question

我正在处理一个导航栏，在点击时显示下拉菜单。 该脚本只是切换类以显示它。

$(".dropdown-btn").click(function() { 
    $(this).children(".dropdown").toggleClass("expanded"); 
}); 

添加样式，它的工作原理。

.dropdown { 
    display: none; 
} 

.dropdown.expanded { 
    display: block; 
} 

问题出在我添加一个嵌套的下拉菜单。当我点击嵌套的“.dropdown-btn”时，该脚本切换子级下拉菜单（因为它应该是）但是它也切换父级的类！为了更好地解释我的意思，请检查这里的小提琴：http://jsfiddle.net/3rm3ny1j/

我有两个问题。这种行为的原因是什么？什么是最好的解决方案？

Answer 1

因为点击事件会冒泡DOM并触发其祖先的点击事件。

添加.stopPropagation()并且可以防止：

$(".dropdown-btn").click(function (e) { 
    e.stopPropagation(); 
    $(this).children(".dropdown").toggleClass("expanded"); 
}); 

jsFiddle example

Answer 2

你有嵌套.dropdown-btn元素，你不stopPropagation，所以点击一个又按下了所有祖先。

注意：为了回答这个问题，我不得不跟随一个链接到外部网站，以便我可以看到你所有的问题。 Stackoverflow问题应该站在自己的优点。所以即使有现在的snipit功能，它与JSFiddle完成相同的工作，但在本地执行。

Answer 3

你.dropdown嵌套在.dropdown-btn内造成任何进一步点击触发父事件。

通过分离触发器和下拉菜单，您可以阻止它们向上触发。

看到这个更新小提琴：http://jsfiddle.net/3rm3ny1j/2/