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

【问题标题】：How to toggle click an element to show or hide the other element?如何切换单击一个元素以显示或隐藏另一个元素？
【发布时间】：2016-06-03 16:58:11
【问题描述】：

当我点击.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>

【问题讨论】：

标签： jquery click document

【解决方案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');
}

});

【讨论】：