时间戳

首页 > 解决方案 > 如果单击容器和按钮以外的任何内容，则 jquery 关闭容器

jquery - 如果单击容器和按钮以外的任何内容，则 jquery 关闭容器

问题描述

我有一个按钮和组，当单击按钮时，组应该显示，当单击组以外的任何内容时，组应该关闭。我下面的代码不起作用

<body>
    <div id="btn" class="control">
    <div id="group" class"control">
</body>

      $("#btn").click(function(){
        $("#group").toggle();
      });

$("body").click(function(evt){    
    if(!$(evt.target).is(".control")) {
        $("#group").hide();
    }

我不能将目标设置为#group，因为这会在单击按钮时取消切换。

使用上面的代码，该组显示何时单击按钮，但在单击屏幕上的任何内容时隐藏，包括单击按钮和组的时间。

如何让 jquery 按预期工作？

谢谢

标签： jquery

解决方案

Try this code please:

$(document).on('click', function(e) {
  var target = $(e.target);
  if (target.is('#btn')) {
    $(".group").toggleClass('hide');
  } else if (target.is('#group')) {
    if ($(".group").hasClass('hide')) {
      $(".group").removeClass('hide');
    }
  } else {
    $(".group").addClass('hide');
  }
})
#btn {
  width: 100px;
}

.group {
  width: 100px;
  height: 100px;
  background-color: red;
  display: block;
}

.group.hide {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" class="control">Click me</button>
<div id="group" class="group hide"></div>

推荐阅读