jQuery切换类以显示面板。通过单击主体或屏幕上的任何位置关闭

我有一个简单的显示面板，使用toggleClass和toggleClass“active”显示面板。一旦面板被显示，我还想选择“不动”和删除类“活动”，通过点击身体上的任何地方来隐藏面板

这是我的jQuery

 $(".number-people .trigger").click(function(){
    $(".number-people-popup").toggleClass("active");
});

我试过了

 $("body").click(function(){
    $(".number-people-popup").removeClass("active");
});

但总是有冲突。我相信有一个简单的方法可以做到这一点

下面是一个JSFIDLE：

谢谢

您正在寻找阻止事件冒泡的方法

编辑 将

包含在折叠的

div

中，以反映评论中的问题

$（“.number people.trigger”）。单击（函数（e）{
$（“.number人弹出”）.toggleClass（“活动”）；
e、 停止传播（）；
});
$（“正文”）。单击（功能（e）{
if（！$（e.target）.hasClass（“数字人物弹出”）和&$（e.target）.parents（“.number人物弹出”）.length==0）{
$（“.number人弹出”）.removeClass（“活动”）；
}
});
.trigger{
光标：指针；
}
.弹出的人数{
显示：无；
边框：1px实心#000；
填充：30px；
宽度：150px；
文本对齐：居中；
}
.主动{
显示：块；
}


点击触发

此处显示面板
1.
2.
3.





一旦触发，我希望通过单击背景中的任意位置来关闭。
您正在寻找的停止事件冒泡的方法

编辑
将
包含在折叠的
div
中，以反映评论中的问题


$（“.number people.trigger”）。单击（函数（e）{
$（“.number人弹出”）.toggleClass（“活动”）；
e、 停止传播（）；
});
$（“正文”）。单击（功能（e）{
if（！$（e.target）.hasClass（“数字人物弹出”）和&$（e.target）.parents（“.number人物弹出”）.length==0）{
$（“.number人弹出”）.removeClass（“活动”）；
}
});
.trigger{
光标：指针；
}
.弹出的人数{
显示：无；
边框：1px实心#000；
填充：30px；
宽度：150px；
文本对齐：居中；
}
.主动{
显示：块；
}


点击触发

此处显示面板
1.
2.
3.





一旦触发，我想通过单击背景中的任意位置来关闭。
下面是非常快速的：


$（'html'）。单击（函数（）{
$（“.number人弹出”）.removeClass（“活动”）
});
$（“.number people.trigger”）。在（'click'，函数（e）{
e、 停止传播（）；
$（“.number人弹出”）.toggleClass（“活动”）；
});
.trigger{cursor:pointer；}
.number人物弹出窗口{显示：无；边框：1px实心#000；填充：30px；宽度：150px；文本对齐：中心；}
.active{display:block；}


点击触发

此处显示面板






一旦触发，我想通过单击背景中的任意位置来关闭。
下面是非常快速的：


$（'html'）。单击（函数（）{
$（“.number人弹出”）.removeClass（“活动”）
});
$（“.number people.trigger”）。在（'click'，函数（e）{
e、 停止传播（）；
$（“.number人弹出”）.toggleClass（“活动”）；
});
.trigger{cursor:pointer；}
.number人物弹出窗口{显示：无；边框：1px实心#000；填充：30px；宽度：150px；文本对齐：中心；}
.active{display:block；}


点击触发

此处显示面板






一旦触发，我想通过单击背景中的任意位置来关闭。
感谢您的回复。stopPropagation（）是我想要的。谢谢你的回复。stopPropagation（）就是我要找的。解释一下，你知道我怎么能在显示面板中有下拉列表，可以在不关闭显示的情况下进行选择吗？@alexgomy你可以通过检查单击的元素是否是div或它的任何子元素来实现，如果两者都不是真的，则删除该类，
e.target
这是单击的元素
if（！$（e.target）.hasClass（“人数弹出”）和&$（e.target）.parents（“人数弹出”）。length==0）
解释这一点，你知道我怎么能在显示面板中有下拉菜单，可以在不关闭显示的情况下进行选择吗？@alexgomy你可以通过检查单击的元素是div还是它的任何子元素来实现，如果两者都不是真的，则删除类，
e.target
它是单击的元素
if（！$（e.target）.hasClass（“数字人物弹出窗口”）&&&$（e.target）.parents（“数字人物弹出窗口”）.length==0