单击页面上的任何位置时隐藏单击触发的 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() {&nbsp; $(".son").show();});$(document).click(function (e) {&nbsp; &nbsp; var container = $(".dad");&nbsp;&nbsp; &nbsp; if(!container.is(e.target) &&&nbsp;&nbsp;&nbsp; &nbsp; container.has(e.target).length === 0) {&nbsp; &nbsp; &nbsp; &nbsp; $(".son").hide();&nbsp; &nbsp; }});.dad {&nbsp; background: greenyellow;&nbsp; width: 20px;&nbsp; height: 20px;&nbsp; margin-top: 100px;&nbsp; z-index: 2;}.son {&nbsp; position: relative;&nbsp; left: 20px;&nbsp; bottom: 100px;&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; display: none;&nbsp; background: tomato;&nbsp; z-index: 2;}p {&nbsp; 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">&nbsp; <div class="son"></div></div><div class="uncle"></div>