0

初めて質問しましたが、このサイトは私のために何百もの回答をしてくれました。

わかりました、jquery を使用して、それぞれのボタンから 2 つの div をアニメーション化しています。それらは機能しますが、私には理解できない不具合があります。css では両方の div の高さが 0 です。最初のボタンをクリックすると、最初の div が開きます。次に、2 番目のボタンをクリックすると、最初の div が閉じ、2 番目の div が開きます (必要に応じて)。しかし、2 番目のボタンをもう一度クリックして 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 に答える