javascript - 在 div 及其按钮外单击时关闭 div

Question

我有一个由按钮控制(显示/隐藏)的 div(目标)。当按钮被触发时，div 将出现。在那一刻，当我点击按钮或那个 div(目标)以外的任何地方时。 div(目标)应该隐藏起来。

我已经尝试使用 event.stopPropagation(); 但没有找到结果

按钮

<div class="applicationTrigger appbtn">
  <i class="so-icon"></i>
</div>

目标分区

<div class="app-drop"></div>

当我使用 event.stopPropagation(); 方法时，完整的按钮操作不起作用。

Answer 1

我已附上演示，它将根据您的要求运行。单击按钮将显示div 内容。如果您在 div 外部单击，它将隐藏 div 的内容。

$(document).mouseup(function (e){
    var container = $(".wrapper");
	if (!container.is(e.target) && container.has(e.target).length === 0){
		container.fadeOut();
	}
}); 

$(document).on('click','#show_btn',function (e){
   $(".wrapper").toggle();
}); 

.wrapper{
   display:none;
   height:200px;
   width:100px;
   border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gall
</div>
<button id="show_btn" type="button">Show</button>