Question

我有两个我打开的div，但是由于编程原因无法连接。我在这里简化了代码，因为它代码很多。这是基本的。

<div id="container">

  <div id="div1">
     <div> when I am clicked I will open div2 </div>
  </div>

  <div id="div2">
     <div> I can be clicked and all the div's stay open </div>
  </div>

</div>

这是连接的JavaScript

  $(document).mouseup(function (e) {
    var container = $("#div1");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      container.hide();
    }
  });

  $(document).mouseup(function (e) {
    var container = $("#div2");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      container.hide();
    }
  });

现在我想要做的是当我点击div1之外它应该关闭div1。

当我点击div1时，会打开div2。

目前，当我点击div2时它会关闭div1，因为它不是div1的孩子。所以它应该保持div2打开。

当我点击div1或div2之外时，它应关闭两个div。

如何合并两个JavaScript代码以获得解释的行为？

我尝试完成的内容摘要：

点击div1内的div将会打开div2
点击外div1或div2会关闭div1和div2。
如果未点击div1内的div并且点击外部 div1，它应关闭div1。

Answer 1

漂亮的理论......

但要求很清楚。我会使用.stopPropagation()。

e.target是点击的元素。如果它是同一事件上具有“同意处理程序”的元素的子元素，则将执行来自父的处理程序。除非您停止传播，您应该查看here。

在最顶层的父母上有一个说“全部隐藏”的处理程序，将会克服孩子的处理程序说其他事情。所以在这种情况下......从孩子那里，你不希望点击（或鼠标上升......或任何事件）传播到顶级父母。

简而言之：.stopPropagation()会将事件保留在相关元素上，您可以“不关心”来自父母的任何同意处理程序。

$("#div1").on("click", function(e){ e.stopPropagation(); whoAmI(e); $("#div2").show(); }); $("#div2").on("click", function(e){ e.stopPropagation(); whoAmI(e); console.log("I was clicked and #div1 stayed opened."); }); $("#container").on("click",function(e){ $("#div1,#div2").hide(); whoAmI(e); }); function whoAmI(e){ console.clear(); console.log( "I'm "+e.target.tagName+" "+((e.target.id=='')? "child" : e.target.id) ); }

#container{ height:1000px; } #div1, #div2{ border:1px solid red; padding:2em; margin:3em; } #div2{ display:none; } #container>div>div{ border:1px solid blue; padding:0.5em; margin:1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="div1"> <div> When I am clicked I will open div2 </div> <div> I also do the same. </div> </div> <div id="div2"> <div> I can be clicked and all the div's stay open </div> <div> I also do the same. </div> <div> And me too! </div> </div> </div>

Answer 2

使用closest()和公共类使这更简单

$(document).mouseup(function(e) {
  !$(e.target).closest('.content').length &&  $('.content').hide(); 
});

$('#div1').click(function() {
  $('#div2').show();
})

#div2{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="div1" class="content">
    <div> when i am clicked i will open div2 </div>
  </div>
  <div id="div2" class="content">
    <div> i can be clicked and all the div's stay open </div>
  </div>
</div>

Answer 3

我建议使用jQuery编写的代码：

$(document).on('click', function (e) {
    if ( e.currentTarget.id == 'div1' ) {
        $("#div2").show();
    } else if ( e.currentTarget.id == 'div2' ) {
        $("#div1").hide();
    } else {
        $("#div1").hide();
        $("#div2").hide();
    }
    return false;
});

或以简单的Javascript：

function handleClicks(e) {
    var first = document.getElementById('div1'),
        second = document.getElementById('div2');
    if ( e.currentTarget.id == 'div1' ) {
        second.style.display = 'block';
    } else if ( e.currentTarget.id == 'div2' ) {
        first.style.display = 'none';
    } else {
        first.style.display = 'none';
        second.style.display = 'none';
    }
}
document.body.addEventListener('click', handleClicks, false);

同时检查那里的if-else语句。

单击div外部并关闭div，即使div不是父级的子级

3 个答案: