jquery - このjqueryslideToggleコードが機能しないのはなぜですか？

Question

展開/折りたたみボタンのボタンテキストを変更しようとしています。基本的に、ユーザーが[折りたたみ]をクリックしてslideToggleを実行し、slideToggleが完了したら、ボタンのテキストを[展開]に変更します。その逆も同様です。

次のコードはうまく機能しますが、展開/折りたたみボタンをすばやくクリックすると、気が狂い、すでに展開されている場合は「展開」、すでに折りたたまれている場合は「折りたたみ」と表示されます。

ヒントをいただければ幸いです。

ありがとう！

関数toggleBox（ボタン、ボックス）{if（$（box）.is（ "：hidden"））{$（box）.slideToggle（ "slow"、function（）{$（button）.html（ "Collapse"） ;}）; } else {$（box）.slideToggle（ "slow"、function（）{$（button）.html（ "Expand"）;}）; }}

Answer 1

あなたの場合、次のように、アニメーションが終了した後、テキストを設定するときにチェックを行う方が安全です。

function toggleBox( button, box ){ 
  $(box).slideToggle("slow", function(){ 
    $(button).html($(this).is(":hidden") ? "Expand" : "Collapse"); 
  }); 
}

現在、いつ開始するかを確認していますが、非表示が完了:hiddenするまでではないことに注意してください。したがって、完了する瞬間まで、それはまだです:)slideUp:visible

Answer 2

使用することもできます

:not(:animated)