Javascript 使用jQuery单击任意位置并删除'；主动'；班

我在想如何通过点击屏幕上的任意位置来关闭div时遇到了一些问题

我当前正在切换一个“活动”类以显示一个下拉div，然后试图通过单击主体删除该类：

$(document).ready(function () {

    $('.navbar a').click(function () {
        $(this).next('.navbar-dropdown').toggleClass('active');
    });

    $(body).click(function() {
        if($('.navbar-dropdown').hasClass('active')){
            $('.navbar-dropdown').removeClass('active');
        }
    });

});

<ul class="navbar">
    <li>
        <a href="#">Link</a>
        <div class="navbar-dropdown">
            Dropdown Content
        </div>
    </li>
</ul>

---

然而，任何试图将其配置为正确工作的尝试似乎都被置若罔闻

我做了和你一样的事，这对我很有用。您确定没有附加任何其他事件侦听器吗？或者菜单上的z索引将其置于其他元素之下

$（文档）。单击（函数（e）{
$（“.dialog”）.text（'closed'）
});
$（“.dialog”）。单击（函数（e）{
e、 target.innerText='open'；
e、 停止传播（）；
});
对话框{
宽度：200px；
高度：200px；
背景：古色白；
文本对齐：居中；
}

打开
导航栏中的单击事件正在冒泡到主体，因此两个事件都会触发
stopPropagation（）
是防止这种情况发生的一种方法，但您需要在导航栏链接的事件处理程序中执行此操作，因此它会停止该特定事件；不在单独的事件处理程序中

您可以考虑的另一个改变是只在需要时分配体单击处理程序，而不是一直开机——在NavBar的点击处理程序中创建该处理程序，并在使用时再次禁用它：

$（文档）.ready（函数（）{
$（'.navbar a'）。单击（函数（e）{
var myDropdown=$（this.next（'.navbar dropdown'）；
$（'.navbar dropdown.active'）.not（myDropdown）.removeClass（'active'）；//关闭任何其他打开的下拉列表
myDropdown.toggleClass（'active'）；//打开这个
$（'body'）。单击（函数（）{
//此处不需要if语句，只需使用与活动元素匹配的选择器：
$（'.navbar dropdown.active'）.removeClass（'active'）；
$（'body'）.off（'click'）；//在使用body时取消其click处理程序
});
e、 stopPropagation（）；//防止navbar事件冒泡到正文中
});
});
.active{
颜色：红色
}



下拉内容


下拉内容2


下拉内容3

试试这里的一些答案你试过$（“body”）了吗？单击？当然，这些代码不会起作用，因为你从未重命名过该类！！！您没有类
对话框
中的元素。。。。。。。它应该是
.navbar下拉列表
epascarello-“遇到过几次这种方法”-我一直在引用它作为例子，但我对它的修改不起作用。效果很好！非常感谢Dan。我刚刚注意到与此解决方案有关的一些情况-如果我有两个下拉列表实例并单击第二个，第一个实例仍会同时显示，并且不会关闭/删除活动类。还有其他想法吗？或者我需要开始为每个导航栏下拉列表和相关切换分配特定的类/ID吗？如果我理解正确，您是在尝试确保一次只能打开一个下拉列表？我编辑了上面的答案来处理这个问题（你只需要让“打开”事件从其他下拉列表中删除活动类。）这非常有意义，现在它就在我面前，再次感谢Dan。
$(document.body).click( function() {
    closeMenu();
});

$(".dialog").click( function(e) {
    e.stopPropagation();
});