jQuery 切换类以显示面板.通过单击正文或屏幕上的任何地方关闭

Question

>我有一个简单的显示面板出现，使用切换类"活动"来显示面板。一旦面板显示，我还希望选择"取消切换"并删除"活动"类，以通过单击正文上的任意位置来隐藏面板。

这是我的jQuery

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

我试过做

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

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

这是一个jsFiddle：https://jsfiddle.net/alexgomy/8r0Lkj2b/4/

谢谢

Answer 1

这是非常快的：

$('html').click(function() {
$(".number-people-popup").removeClass("active")
});
$(".number-people .trigger").on('click', function(e){
	e.stopPropagation();
$(".number-people-popup").toggleClass("active");
});

.trigger{cursor:pointer;}
.number-people-popup{display:none;border:1px solid #000;padding:30px;width:150px;text-align:center;}
.active{display:block;}

<div class="number-people">
<p class="trigger">
Click to trigger
</p>
</div>
<div class="number-people-popup">
Reveal panel here
</div>
<br><br><br><br><br>
Once triggered i want to close by clicking anywhere in the background.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

你正在寻找 stopPropagation(( 来阻止事件冒泡

编辑折叠div中的包含<select>以反映对评论的问题

$(".number-people .trigger").click(function(e) {
$(".number-people-popup").toggleClass("active");
e.stopPropagation();
});
$("body").click(function(e) {
if (!$(e.target).hasClass("number-people-popup") && $(e.target).parents(".number-people-popup").length === 0) {
$(".number-people-popup").removeClass("active");
}
});

.trigger {
cursor: pointer;
}
.number-people-popup {
display: none;
border: 1px solid #000;
padding: 30px;
width: 150px;
text-align: center;
}
.active {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="number-people">
<p class="trigger">
Click to trigger
</p>
</div>
<div class="number-people-popup">
Reveal panel here
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<br><br><br><br><br> Once triggered i want to close by clicking anywhere in the background.