Question

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

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

我已阅读此question此article，因此我不想在我的代码中使用event.stopPropagation()，因为它很危险。

＆＃13;

$('.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();
    }
  
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以通过2种方式做到这一点，如果第一种方法不起作用，第二种方法可能有效。请看看并测试。

$('.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');
}

});

如何切换单击元素以显示或隐藏其他元素？

1 个答案: