如何停止jQuery slidetoggle溜溜球？

Question

我是新來的jQuery但這似乎像它應該工作得很好：

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

...和它的工作，但不正確。 ...至少，並不像預期的那樣...

我是否正確地假設上面的代碼會爲ID爲「btn_toggle_transcript」的元素添加點擊處理程序？然後，這個點擊處理程序會通過打開目標div（如果它是關閉的話，使用「transcript_container」的id）來響應點擊，或者如果它打開，則關閉它？

目前發生的事情是：點擊按鈕確實會使div滑動打開。但是，當它完全打開時，它立即 - 並且沒有用戶輸入 - 幻燈片再次關閉。

我已經看到一些論壇帖子，提示可能的原因是處理程序獲得兩次增加。但是，如果我註釋掉上述代碼，則單擊該按鈕時不會執行任何操作。所以，處理程序沒有被添加到其他地方...

任何人都可以告訴我爲什麼我的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; 
} 

== ========

編輯：

我做了三件似乎有所幫助的事情。他們爲什麼工作，我不知道，但他們這樣做。

1）Drupal 6.x使用舊版本的jQuery（1.2.2）。有一個模塊更新到1.3.2。我用1.7.1文件替換了1.3.2更新文件，現在我的DOM報告使用了jQuery的v1.7.1。 3）儘管我只綁定到點擊事件ONCE（通過刪除綁定並且沒有對按鈕單擊調用動作進行驗證），但我決定嘗試添加一條線以刪除我的「幻影「在添加我的實際綁定之前進行綁定。根據我的閱讀，我決定使用現在推薦的on（）和off（）方法來添加/刪除綁定。我準備好（）函數現在看起來是這樣的：

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

現在，我滑的div打開，直到我切換它再次關閉保持打開狀態。好極了！

非常感謝所有回答/評論的人。您的建議和指導幫助我找到了解決方案。

乾杯！

更新： 正如我在其中一條評論中提到的，這是在Drupal中運行的。還提到，如果我註釋了單個綁定，則不會調用任何操作。我的推理是，由於刪除ONE綁定不再援引該行爲，那麼它就沒有辦法被綁定兩次了......

DUMB！

雖然我是正確的，只有一塊綁定代碼，我完全忘了我的模塊已經將我的js文件添加到頁面。因爲我需要在非Drupal環境中部署我的內容，所以我還手動將js文件添加到了我的頁面。兩個包含意味着兩個綁定。 ...這幾天我永遠不會回來！

Answer 1

點擊綁定兩次的情況。看看你做到了這一點的可能性。例如。在js文件中以及html文檔中的內部腳本標記。

另外，如果容器是動態的，則應該使用live而不是click。

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