slideToggle issue with stop（）

Question

$(document).ready(function() { 
    $("ul li").click(function() { 
     $(this).find("p").slideToggle("normal"); 
     return false; 
    }); 
}); 

このjQueryコードを使用すると、要素をスライドインまたはスライドアウトできます。しかし、問題は、誰かが本物の高速をクリックすると、スライドアウトは、最新の到達高さの最大高さに達するまでしか行かないということです。

だから誰かが本当に速くクリックすると、要素は数ピクセルだけスライドして元に戻ってスライドします。彼らが再びそれをスライドさせるために再びクリックするよりも、最後に到達した最大の高さにスライドするだけです。

この作業を適切に行うために、この問題を解決する手助けができますか？

PS：p要素の高さはautoに設定されているため、内部のコンテンツの高さに自動的に一致します（この詳細があなたの回答に役立つかもしれません）。

Answer 1

これを試してください：あなたが実際に追加のクリックを処理したい場合は

$(document).ready(function() { 
    $("ul li").click(function() { 
     if (! $(this).find('p:animated').length) 
     { 
      $(this).find("p").slideToggle("normal"); 
      return false; 
     } 
    }); 
}); 

Answer 2

代わりのクリックイベントを添付するclick機能を使用して、代わりにoneを使用します。

$("ul li").one("click", doStuff); 

function doStuff(){ 
    // do your stuff here 
    $("ul li").one("click", doStuff); // Re-attach event 
} 

、その後機能で再接続しイベントを。

Answer 3

（それらを無視するのではなく）、その後、あなたは前のアニメーションを停止し、あなたの次のような結論にそれをジャンプする.stop(true, true)を使用したいですあなたが好きなアニメーションが実行できます。

$(document).ready(function() { 
    $("ul li").click(function() { 
     $(this).find("p").stop(true, true).slideToggle("normal"); 
     return false; 
    }); 
}); 

を使用すると、ユーザーのクリックからアニメーションをトリガーするたび、あなたはおよそ.stop()を知って、あなたが与えられた状況のためにそれを使用したい引数を見つけ出す必要があります。それがなければ、アニメーションはキューに蓄積され、通常はあなたが望むものではない連続して実行されます。

.stop()のjQuery reference infoとその引数は次のとおりです。