jquery - 单击元素外部时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>

标签： jqueryonclick

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>