为什么jQuery children选择器针对父级？

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嵌套在.dropdown-btn内，导致任何进一步的点击以触发父事件。

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

请参阅此更新的小提琴：http://jsfiddle.net/3rm3ny1j/2/

Answer 3

你有嵌套的 .dropdown-btn元素，而你不是stopPropagation，所以点击一个也会点击它的所有祖先。

注意：为了回答这个问题，我必须关注指向外部网站的链接，这样我才能看到你所有的问题。 Stackoverflow问题应该站在自己的优点上。因此，现在甚至具有剪切功能，它与JSFiddle完成相同的工作，但在本地。