Question

div 最初是隐藏的，我想在单击按钮时显示它。一旦它可见，我想在点击该 div 外部的任何地方时隐藏它。

我正在尝试以下代码，它显示 div，但问题出在框的第二部分（单击外部）。第二部分与第一部分冲突，因此在显示之前将其隐藏。

我该如何解决？

$('button').on('click', function(e){ 
    e.preventDefault();
    $('.box').addClass('active');
});


//hide is by clicking outside .box
$(document).on('click', function (e) {
    if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
        $('.box').hide();
    }
});

button {
  margin-bottom: 20px;
}

.box {
  width: 200px;
  height: 120px;
  background: #fab1a0;
  display: none;  
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>

Answer 1

您可以停止 event 的传播，以便在单击按钮时事件不会冒泡到 document。也不要使用 hide()，只需使用 removeClass(...) 即可。

此外，事件传播不会在此按钮侦听器本身中停止，而是来自下一个事件侦听器，在您的情况下，它位于文档中，这正是我们所需要的。

$('button').on('click', function(e){ 
    e.stopPropagation();
    $('.box').addClass('active');
});


//hide is by clicking outside .box
$(document).on('click', function (e) {
    if ($('.box').is(':visible') && !$('.box').is(e.target) && !$('.box').has(e.target).length) {
        
        $('.box').removeClass('active');
    }
});

button {
  margin-bottom: 20px;
}

.box {
  width: 200px;
  height: 120px;
  background: #fab1a0;
  display: none;  
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>
<div class="box"></div>

单击打开 div，单击外部关闭

1 个答案: