单击页面上的任何位置时隐藏单击触发的 div 时出现问题，同时仍保持所有内容可选

Question

假设单击按钮时触发菜单，现在1_要取消它，用户必须能够单击页面上的任意位置（不仅在同一个按钮上），2_ 页面上的所有其他内容在整个过程中仍必须保持可选状态。这是我尝试过的：$(".dad").click(function() {  $(".son").show();  $(".mask").show();});$(".mask").click(function() {  $(".son").hide();  $(".mask").hide();});.dad {  background: greenyellow;  width: 20px;  height: 20px;  margin-top: 100px;  z-index: 2;}.son {  position: relative;  left: 20px;  bottom: 100px;  width: 100px;  height: 100px;  display: none;  background: tomato;  z-index: 2;}p {  z-index: 2;}.mask {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 1;  display: none;}<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script><p>This is a paragraph</p><div class="dad">  <div class="son"></div></div><div class="uncle"></div><div class="mask"></div>此代码满足第一个条件（单击页面上的任何位置时“.son”隐藏），但不满足第二个条件。因为当“.son”可见时，该段落不是立即可选择的，除非用户再次单击。虽然这似乎是一个小问题，但有时它可能会变得有点烦人，因此这是一个要求。（我也尝试过其他方式。例如，面具上的 CSS “pointer-events: none”，但它有不同的目的，因为它也取消了点击事件）。那么怎么可能做到呢？提前致谢。注意：这不仅仅是一个 CSS 问题，如果它们提供更简单/更好的解决方案，我也会接受任何 Javascript 或 Jquery 答案。

Answer 1

希望它有帮助...

$(".dad").click(function() {

  $(".son").show();

});

$(document).click(function (e) {

    var container = $(".dad"); 

    if(!container.is(e.target) &&  

    container.has(e.target).length === 0) {

        $(".son").hide();

    }

});

.dad {

  background: greenyellow;

  width: 20px;

  height: 20px;

  margin-top: 100px;

  z-index: 2;

}

.son {

  position: relative;

  left: 20px;

  bottom: 100px;

  width: 100px;

  height: 100px;

  display: none;

  background: tomato;

  z-index: 2;

}

p {

  z-index: 2;

}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>

<p>This is a paragraph</p>

<div class="dad">

  <div class="son"></div>

</div>

<div class="uncle"></div>