我正在开发一个在点击时显示下拉菜单的导航栏。 该脚本只是切换类以显示它。
$(".dropdown-btn").click(function() {
$(this).children(".dropdown").toggleClass("expanded");
});
添加样式,它起作用了。
.dropdown {
display: none;
}
.dropdown.expanded {
display: block;
}
当我添加一个嵌套的下拉菜单时,问题就来了。当我点击嵌套的“.dropdown-btn”时,脚本会切换子下拉列表的类(正如它应该的那样)但它也会切换父类!为了更好地解释我的意思,请检查此处的 fiddle :http://jsfiddle.net/3rm3ny1j/
我有两个问题。这种行为的原因是什么?什么是最佳解决方案?
最佳答案
因为点击事件会使 DOM 冒泡并触发其祖先的点击事件。
添加 .stopPropagation()
可以防止这种情况发生:
$(".dropdown-btn").click(function (e) {
e.stopPropagation();
$(this).children(".dropdown").toggleClass("expanded");
});
关于javascript - 为什么 jQuery 子选择器以父为目标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27570603/