當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .toggle()用法及代碼示例


用法 
.toggle( handler, handler [, handler ] ) => jQuery

版本已棄用：1.8，已刪除：1.9

說明：將兩個或多個處理程序綁定到匹配的元素，以在交替單擊時執行。

  • 添加的版本：1.0.toggle( handler, handler [, handler ] )

    • handler
      類型：Function(Event eventObject)
      每次單擊元素時執行的函數。
    • handler
      類型：Function(Event eventObject)
      每次單擊元素時執行的函數。
    • handler
      類型：Function(Event eventObject)
      單擊後要循環通過的其他處理程序。

注意：此方法簽名在 jQuery 1.8 中已棄用，並在 jQuery 1.9 中刪除。 jQuery 還提供了一個名為.toggle() 的動畫方法，用於切換元素的可見性。是否觸發動畫或事件方法取決於傳遞的參數集。

.toggle() 方法為 click 事件綁定了一個處理程序，因此為觸發 click 概述的規則也適用於此。

例如，考慮 HTML：

<div id="target">
  Click here
</div>

然後可以將事件處理程序綁定到 <div> ：

$( "#target" ).toggle(function() {
  alert( "First handler for .toggle() called." );
}, function() {
  alert( "Second handler for .toggle() called." );
});

隨著元素被反複點擊，消息交替出現：

.toggle() 的第一個處理程序被調用。
.toggle() 的第二個處理程序被調用。
.toggle() 的第一個處理程序被調用。
.toggle() 的第二個處理程序被調用。
.toggle() 的第一個處理程序被調用。

如果提供了兩個以上的處理程序，.toggle() 將在所有處理程序之間循環。例如，如果有三個處理程序，那麽第一個處理程序將在第一次單擊、第四次單擊、第七次單擊時調用，以此類推。

為方便起見，提供了.toggle() 方法。手動實現相同的行為相對簡單，如果 .toggle() 內置的假設證明是有限的，這可能是必要的。例如，如果將 .toggle() 應用於同一元素兩次，則不能保證正常工作。由於 .toggle() 在內部使用 click 處理程序來完成其工作，我們必須解除綁定 click 以刪除附加到 .toggle() 的行為，因此其他 click 處理程序可能會陷入交火。該實現還在事件上調用.preventDefault()，因此如果在元素上調用了.toggle()，則不會跟蹤鏈接並且不會單擊按鈕。

例子：

切換表格單元格的樣式。 (不推薦。使用 .toggleClass() 代替。)：

$( "td" ).toggle(
  function() {
    $( this ).addClass( "selected" );
  }, function() {
    $( this ).removeClass( "selected" );
  }
);

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .toggle()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。