如何通过单击 link 在屏幕上打开一个框并在 JS 外部单击时将其隐藏

Question

我的目标是让 #box2 在我点击 #box1 时出现，但是当你点击 #box2 以外的东西时，它会显示 none 并且只显示 #box1 会显示。

这是我的 2 个框，它们只是 2 个样式的 div：

 var condition;


 $(document).click(function() {

   if (condition === 'block') {
     $(":not(#box2)").click(function() {
       $("#box2").hide();
     });
   }

 })



 $('#box1').click(function(e) {
   $('#box2').css('display', 'block');
   condition = 'block';
 });

 $('#box2').click(function(e) {
   $('#box2').css('display', 'none');
   condition = 'none';
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" style="width: 300px; height: 300px; background-color: red; margin-left: 100px; margin-bottom: 50px; position: absolute;">
</div>



<div id="box2" style="width: 300px; height: 300px; background-color: blue; margin-left: 150px; display: none; position: absolute;">
</div>

此当前代码第一次可以正常工作，但之后就不会再运行了。我只是想知道是否有重置功能或者我哪里出错了？

我真正想做的是让这个在 ipad 上工作，这样当用户 clicks/taps 离开盒子时，它就会关闭。如果在 Ipad 平板电脑上有更好的方法，请告诉我！！

有什么想法吗？

Answer 1

$(document).click(function () {
        if (condition === 'block')
        {
            $(":not(#box2)").click(function () {
                $("#box2").hide();
            });
        }
    })

第 $("#box2").hide(); 行在每次点击后触发

Answer 2

不要把事情复杂化。这就是您需要的所有 javascript，摆脱其他一切：

$(document).click(function () {
    $('#box2').hide();
});

$('#box1').click(function (e) {
    e.stopPropagation();
    $('#box2').show();
});

Answer 3

您可以只在文档级别过滤事件目标：

$(document).on('click', function(e) {
  $('#box2').toggle(!!$(e.target).closest('#box1').length);
});

-jsFiddle-

Answer 4

您可以监听 document 的所有 click 事件，然后使用 event.target 检测哪个元素被点击。如果单击的元素是 box1 并且未显示 box2 则将其显示给用户。在任何其他情况下，如果 box2 不是被单击的元素，我们可以隐藏它。这是实现此目的的普通 JavaScript 代码：

<html>
<body>
  <div id='box1'>BOX ONE</div>
  <div id='box2' style="display: none;">BOX TWO</div>
  <script>
    document.addEventListener('click', function(event) {
      var secondBox = document.getElementById('box2')
      if(event.target.id === 'box1' && secondBox.style.display === 'none'){
        secondBox.style.display = 'block'
      } else if (event.target.id !== 'box2') {
        secondBox.style.display = 'none'
      }
    })
  </script>
</body>
</html>

如果你喜欢 DRY（不要重复自己），你可以为这个任务定义一个函数。看看这个修改后的脚本版本：

function addOpenHandler(handler, target){
  document.addEventListener('click', function(event) {
    if(event.target === handler && target.style.display === 'none'){
      target.style.display = 'block'
    } else if (event.target !== target) {
      target.style.display = 'none'
    }
  })
}

addOpenHandler( document.getElementById('box1'), document.getElementById('box2') )

如何通过单击 link 在屏幕上打开一个框并在 JS 外部单击时将其隐藏

How to open a box on screen by clicking a link and hide it when clicked outside in JS

javascript

jquery

tablet

ipad

-jsFiddle-