如果任何一个div可见，则jQuery隐藏

Question

我有两个最初隐藏的div

<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">

我还有一个可见的div

<div id="me" style="display:block">

我有jQuery代码，它只允许#whistle或#lean div同时打开，它们的按钮将隐藏另一个。

我目前有一些代码也隐藏了#me div，但是现在我希望#me div在#whistle和#lean都关闭时重新打开。

如果您想查看网站，链接是maxdev.tk。

jQuery代码是

$(document).ready(function(){
    $("#calc").click(function(){
        $("#whistle").hide(600);
        $("#lean").toggle(900);
});
});

$(document).ready(function(){
    $("#whi").click(function(){
        $("#lean").hide(600);
        $("#whistle").toggle(900);
});
});

Answer 1

这是解决问题的一种方法。在这篇文章的末尾，也可以找到一支笔。

​

$(document).ready(function() {
  function callback() {
    if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
          $('#me').removeClass('hidden');
    } else {
          $('#me').addClass('hidden');
    }
  }
  $('button[data-for=whistle]').on('click', function() {
    $('#whistle').toggleClass('hidden');
    $('#lean').addClass('hidden');
    callback();
  });
  $('button[data-for=lean]').on('click', function() {
    $('#lean').toggleClass('hidden');
    $('#whistle').addClass('hidden');
    callback();
  });
})

.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
}

div {
  background-color: #ccc;
  border-radius: 25px;
  margin-top: 20px;
  padding: 50px;
  text-align: center;
  transition-duration: 0.4s;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>

​

http://codepen.io/anon/pen/yNJrwe

Answer 2

将此代码添加到任何按钮单击函数的末尾。

if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
      $('#me').css("display","block"); // or use .show();
} else {
      $('#me').css("display","none"); // or use .hide();
}