如何通过单击链接在屏幕上打开一个框,并在JS外部单击时隐藏它

Question

我的目标是#box2在我点击#box1时出现,但当你点击其他内容时#box2,它将不会显示任何内容,只会#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上工作,这样当用户点击/点击该框时,它就会关闭.如果有更好的方法在Ipad平板电脑上执行此操作,请告诉我!

有任何想法吗？

Answer 1

不要过于复杂化.这是你需要的所有javascript,摆脱其他一切:

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

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