jQuery slidetoggle yo-yoを停止する方法はありますか？

Question

私はjQueryのに新しいですが、それはうまく動作するはずのようにこれはそうです：

$(document).ready(
    function() 
    { 
     $("#btn_toggle_transcript").click(
      function() 
      { 
       $("#transcript_container").slideToggle(1000); 
      }  
     ); 
    } 
); 

を...そして、それは仕事をしてではなく、正しく。 ...少なくとも、期待どおりではありません...

上記のコードが "btn_toggle_transcript"というIDの要素にクリックハンドラを追加したとします。このクリックハンドラは、閉じられている場合はターゲットdiv（... "transcript_container"のID）を開くか、開いている場合は閉じます。

現在のところ、ボタンをクリックするとdivスライドが開きます。しかし、それが完全に開いているときは、それは即座に - そしてユーザー入力なしで - 再び閉じられます。

私はいくつかのフォーラム投稿から、ハンドラーが2回追加される可能性があることを示唆しています。しかし、上記のコードをコメントアウトすると、ボタンがクリックされたときには何も行われません。だから、ハンドラは他の場所に追加されていません...

誰も私のdivはそれ自体で閉じてヨーヨーですなぜ教えてください？

ボタンのHTML：

<div id="tools_button_container"> 
    <div class="tools_button" id="btn_toggle_transcript"></div> 
</div> 

スライディングdiv要素（コンテンツが動的に設定されている）のためのHTML：

<div id="transcript_container"> 
    <div id="transcript_contents"></div> 
</div> 

とCSS：

#transcript_container{ 
z-index:4; 
position:absolute; 
width:290px; 
max-height:455px; 
top:51px; 
right:-2px; 
background-color:#90B2D8; 
padding:20px 10px 10px 10px; 
border-bottom: 1px solid #000; 
border-left: 1px solid #000; 
border-right: 1px solid #000; 
display:none; 
} 

#transcript_contents{ 
max-height:375px; 
overflow:auto; 
margin:20px 0px 10px 0px; 
background-color:#ffffff; 
padding:0px 5px 0px 5px; 
} 

#btn_toggle_transcript { 
background: url('images/transcript.png') no-repeat 0 0; 
display:block; 
} 

#circle_btn_toggle_transcript:hover { 
background-position: 0px -50px; 
} 

== ========

EDIT：

私は助けたと思われる3つのことをしました。彼らが働いた理由は分かりませんが、彼らはそうしています。

1）Drupal 6.xは古いバージョンのjQuery（1.2.2）を使用しています。 1.3.2にアップデートするモジュールがあります。私は1.3.2アップデートファイルを1.7.1ファイルに置き換えました。そして、jQueryのv1.7.1を使ってDOMレポートを作成しました。

2）& 3）クリックイベントで一度だけバインドする（バインディングを削除し、ボタンをクリックしてもアクションが実行されないことを確認したにもかかわらず）私は自分の「ファントム」を削除する行を追加しようとしました"私の実際のバインディングを追加する前にバインディング。私の読書に基づいて、今推奨されているon（）メソッドとoff（）メソッドを使用して、バインディングを追加/削除することに決めました。私のready（）関数は次のようになります：

$(document).ready(
function(){ 
    $("body").off("click", "#btn_toggle_transcript"); 
    $("body").on("click", "#btn_toggle_transcript", 
     function(){ 
      $("#transcript_container").slideToggle(1000); 
     } 
    ); 
} 
); 

今、私のスライディングdivが開き、再び閉じられるまで開いています。わーい！

回答したすべての人に感謝/コメントしました。あなたの提案と指針は、私が解決策を得るのを助けました。

乾杯！

更新： コメントの1つで述べたように、これはDrupalで実行されています。また言及したように、私が単一バインディングをコメントアウトした場合、アクションは呼び出されませんでした。私の推論は、ONEバインディングの削除がアクションを呼び出すのを止めてから、それが2回バインドされているという方法はありませんでした。

DUMB！

バインディングコードが1ブロックしかないのは間違いありませんが、私のモジュールがすでにjsファイルをページに追加していたことを完全に忘れてしまいました。非Drupal環境でもコンテンツを展開する必要があるため、手動でjsファイルをページに追加していました。 ... 2つの包含物は2つの束縛を意味した。 ...それは私が戻ってくることはないだろう、数日です！

Answer 1

クリックが2回バインドされる場合があります。あなたがそれをやった可能性を見てください。例えば。 jsファイル内に、そしてhtmlドキュメント内のscriptタグ内にもあります。

また、コンテナが動的な場合は、クリックの代わりにライブを使用する必要があります。

$("selector").live("click", function() { /*body*/ }) 

これを試すことができます。

$(document).ready(
function(){ 
    $("body").click("#btn_toggle_transcript", 
     function(){ 
      if(!$("#transcript_container").hasClass('opened')) { 
       $("#transcript_container").slideDown(1000).addClass('opened'); 
      } else { 
       $("#transcript_container").slideUp(1000); 
      } 
     } 
    ); 
} 
); 

Answer 2

私の答えの最後に新しい解決策があります。

私はこの同じ問題を何回も経験していて、間違いなくその関数を呼び出しただけです。
いくつかの理由について次のようにtween.end変数はこれに0.私の回避策に頼るような方法のどんな小さなステップは次のとおりです。

$('body').on('click', '.toggle', function() { 
    var ul = $(this).next('ul'); 
    if (!$(ul).hasClass('open')) { 
     $(ul).slideDown({ 
      step: function(now, tween) { 
       if (tween.end == 0) { 
        stop(); 
       } 
      }, 
      complete: function() { 
       $(ul).addClass('open'); 
      } 
     }); 
    } else { 
     $(ul).slideUp('', '', function() { 
      $(ul).removeClass('open'); 
     }); 
    } 
}); 

少し厄介が、それは私ができなかったように私が思い付くことができるすべてです関数の別の呼び出しを見つけます。

編集

古い質問 - 新しいソリューションを持ちます。
slideToggleの前にstop（）を追加するだけで、繰り返し発生するヨーヨー効果が修正されます。

$('#element').stop().slideToggle();

Answer 3

あなたはクラスを追加するには、イベントの終了を待ちます。

$(document).ready(
    function(){ 
     $("body").click("#btn_toggle_transcript", 
      function(){ 
       if(!$("#transcript_container").hasClass('opened')) { 
        $("#transcript_container").slideDown(1000,function(){$(this).addClass('opened')}); 
       } else { 
        $("#transcript_container").slideUp(1000,function(){$(this).removeClass('opened')}); 
       } 
      } 
     ); 
    } 
);