为什么jQuery子选择器以父选择器为目标

Why jQuery children selector is targeting the parent?

本文关键字：选择器 目标 为什么 jQuery      更新时间：2023-09-26

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

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

添加样式，它就可以工作。

.dropdown {
    display: none;
}
.dropdown.expanded {
    display: block;
}

当我添加嵌套下拉菜单时，问题就来了。当我单击嵌套的".dropdown-btn"时，脚本会切换子下拉列表的类(因为它应该(，但它也会切换父级的类！为了更好地解释我的意思，请检查这里的小提琴：http://jsfiddle.net/3rm3ny1j/

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

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

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

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

js小提琴示例

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

通过将触发器和下拉列表分开，您可以阻止它们向上触发。

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

你已经嵌套了.dropdown-btn元素，并且你没有stopPropagation，所以点击一个也会点击它的所有祖先。

注意：为了回答这个问题，我必须点击一个外部网站的链接，这样我才能看到你所有的问题。堆栈溢出问题应该有自己的优点。SO现在甚至具有截图功能，它与JSFiddle执行相同的工作，但在本地。

相关文章：