0

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

好的，我正在使用 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>
4

2 回答 2

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

演示：小提琴

于 2013-10-24T03:53:36.670 回答
0

使用 Jquery Show()和hide()

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

});

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

});

演示

于 2013-10-24T04:08:40.730 回答