时间戳

首页 > 解决方案 > 通过单击打开 div 并通过单击外部关闭

javascript - 通过单击打开 div 并通过单击外部关闭

问题描述

一个 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>

标签： javascriptjquery

解决方案

您可以停止您的传播，event以便在单击按钮时事件不会冒泡到document. 也不是hide(), 只是 usingremoveClass(...)应该适合你。

此外，事件传播不会在此按钮侦听器本身中停止，而是从下一个事件侦听器开始，在您的情况下，该事件侦听器在文档上，这就是我们所需要的。

$('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>

推荐阅读