为什么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

因为click事件将使DOM冒泡并触发其祖先上的click事件。

添加.stopPropagation() ，您可以防止这种情况：

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

jsFiddle示例

Answer 2

您的.dropdown嵌套在.dropdown-btn导致任何进一步的单击都会触发父事件。

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

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

Answer 3

您已经嵌套了 .dropdown-btn元素，并且没有stopPropagation ，因此单击一个元素还会单击其所有祖先。

注意：为了回答这个问题，我必须点击一个外部站点的链接，这样我才能看到您所有的问题。 Stackoverflow问题应各有千秋。 SO现在甚至具有snipit功能，该功能与JSFiddle相同，但在本地。