Question

第一次问一个问题，但这个网站已经为我回答了数百个问题。

好的，我正在使用jquery从每个按钮动画2个div。他们工作，但有一个我无法弄清楚的故障。这两个div在css中的高度为0。如果我单击第一个按钮，则会打开第一个div。然后单击第二个按钮，第一个div关闭，第二个打开（根据需要）。但是，如果我再次单击第二个按钮并关闭div，则再次单击第一个按钮，直到另一次单击才会发生任何事情。我希望这个笨蛋是有道理的。解决这个故障的任何帮助都会很棒，谢谢

这是一个jfiddle。 http://jsfiddle.net/Jptalon/AMu2Z/1/

<button id="btnOne">One</button>
<button id="btnTwo">Two</button>
<div id="one">
<p>one text</p>
</div>
<div id="two">
<p>two text</p>
</div>
<script>
var stateone = true;
var statetwo = true;
$(function() {
$("#btnOne").click(function(){
  var x = document.getElementById('two');
  if ( x.style.height != 0){ $("#two").animate({height:"0px" }, "slow"); statetwo = !statetwo;}
   if ( stateone ) {
     $("#one").animate({height:"100px" }, "slow");
   } else {
     $("#one").animate({height:"0px" }, "slow");
   }
   stateone = !stateone;
   });
 });
 $(function() {
 $("#btnTwo").click(function(){
   var y = document.getElementById('one');
   if ( y.style.height != 0){ $("#one").animate({height:"0px" }, "slow"); stateone = !stateone;}
   if ( statetwo ) {
     $("#two").animate({height:"100px" }, "slow");
   } else {
     $("#two").animate({height:"0px" }, "slow");
   }
   statetwo = !statetwo;
  });
});
</script>

Answer 1

它可以做得更好......

<button id="btnOne" class="switch" data-target="#one">One</button>
<button id="btnTwo" class="switch" data-target="#two">Two</button>
<div id="one" class="toggle">
    <p>one text</p>
</div>
<div id="two" class="toggle">
    <p>two text</p>
</div>

然后

.toggle {
    display: none;
}

和

var $toggles = $('.toggle');
$('.switch').click(function(){
    var $target = $($(this).data('target')).stop(true, true);
    $toggles.not($target).stop(true, true).slideUp();
    $target.slideToggle('slow');
})

演示：Fiddle

Answer 2

使用Jquery Show()和hide()

$("#btnOne").click(function () {
    $("#two").hide('slow');
    $("#one").show('slow');

});

$("#btnTwo").click(function () {
   $("#one").hide('slow');
    $("#two").show('slow');

});

DEMO

动画2个div的奇怪问题

2 个答案: