Question

我有2 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

这是解决问题的一种方法。在这篇文章的末尾也可以用它作为笔。

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

将此代码添加到任何按钮的末尾＆＃39;点击功能。

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

如果div可见，jQuery会隐藏

2 个答案: