jQuery在元素外部单击时弹出弹出窗口，否则子级不起作用

Question

我似乎无法弄清楚当我单击“目标”元素时如何隐藏它。 “文档”点击事件无法正确触发任何提示？

$(".contact").click(function() {
  $(".target").toggle();
});

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    $(".target").hide();
  }
});

.target {
  display: none;
  border: solid grey 2px;
  box-shadow: grey 2px 2px;
  position: fixed;
  width: 75%;
  left: 50%;
  top: 30%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="contact btn btn-primary">Click </button>

<div id="menucontainer">
  <div class="target">carter</div>
</div>

Answer 1

您的示例可行，您只需要检查是否单击按钮，如下所示： if(!$(event.target).closest('#menucontainer').length&&!event.target.classList.contains('contact')) { $(".target").hide(); }

$(".contact").click(function() {
  $(".target").toggle();
});

$(document).on('click', function(event) {
if(!$(event.target).closest('#menucontainer').length&&!event.target.classList.contains('contact')) {
  $(".target").hide();
}
});

.target {
  display: none;
  border: solid grey 2px;
  box-shadow: grey 2px 2px;
  position: fixed;
  width: 75%;
  left: 50%;
  top: 30%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="contact btn btn-primary">Click </button>

<div id="menucontainer">
  <div class="target">carter</div>
</div>