jquery - 如何切换单击一个元素以显示或隐藏另一个元素？

Question

当我点击.foo区域时，.bar将显示。
当我点击document区域时，.bar将隐藏。
但当我点击 .foo 区域使 .bar 隐藏时，我不知道该怎么做。

<div class="foo"></div>
<div class="bar"></div>

我读过这篇文章question这个article ，所以我不想在我的代码中使用 event.stopPropagation() 因为它很危险。

$('.foo').click(function() {
  $('.bar').show()
})

$(document).mouseup(function(e) {
 
    var _con = $('.bar'); 
    if (!_con.is(e.target) && _con.has(e.target).length === 0) { 
      $('.bar').hide();
    }
  
});

.foo {
  width: 100px;
  height: 100px;
  background: red;
  margin-bottom: 20px;
}
.bar {
  width: 100px;
  height: 100px;
  background: green;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="foo"></div>
<div class="bar"></div>

Answer 1

您可以通过两种方式来完成此操作，如果第一种方法不起作用，则第二种方法可能会起作用。请查看并测试。

$('.foo').click(function(){
$('.bar').toggle();
});


//2nd approach
$('.foo').click(function(){
var bar = $('.bar');

if(bar.css('display') == "block"){
    bar.css('display', 'none');
}else{
    bar.css('display', 'block');
}

});