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

Question

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

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

添加样式，它起作用了。

.dropdown {
    display: none;
}

.dropdown.expanded {
    display: block;
}

当我添加一个嵌套的下拉菜单时，问题就来了。当我点击嵌套的“.dropdown-btn”时，脚本会切换子下拉列表的类(正如它应该的那样)但它也会切换父类!为了更好地解释我的意思，请检查此处的 fiddle :http://jsfiddle.net/3rm3ny1j/

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

Answer 1

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

添加 .stopPropagation() 可以防止这种情况发生:

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

jsFiddle example