很實用的jQuery事件 - toggle() 方法

轉自w3school

實例

切換不同的背景色：

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

親自試一試

定義和用法

toggle() 方法用於綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。

該方法也可用於切換被選元素的 hide() 與 show() 方法。

向 Toggle 事件綁定兩個或更多函數

當指定元素被點擊時，在兩個或多個函數之間輪流切換。

如果規定了兩個以上的函數，則 toggle() 方法將切換所有函數。例如，如果存在三個函數，則第一次點擊將調用第一個函數，第二次點擊調用第二個函數，第三次點擊調用第三個函數。第四次點擊再次調用第一個函數，以此類推。

語法

$(selector).toggle(function1(),function2(),functionN(),...)

親自試一試

參數	描述
function1()	必需。規定當元素在每偶數次被點擊時要運行的函數。
function2()	必需。規定當元素在每奇數次被點擊時要運行的函數。
functionN(),...	可選。規定需要切換的其他函數。

切換 Hide() 和 Show()

檢查每個元素是否可見。

如果元素已隱藏，則運行 show()。如果元素可見，則元素 hide()。這樣就可以創造切換效果。

語法

$(selector).toggle(speed,callback)

親自試一試

參數	描述
speed	可選。規定 hide/show 效果的速度。默認是 "0"。 可能的值： 毫秒（比如 1500） "slow" "normal" "fast"
callback	可選。當 toggle() 方法完成時執行的函數。 如需學習更多有關 callback 的知識，請訪問我們的 Callback 函數教程。

顯示或隱藏元素

規定是否只顯示或只隱藏所有匹配的元素。

語法

$(selector).toggle(switch)

親自試一試

參數	描述
switch	必需。布爾值，規定 toggle() 是否應只顯示或只隱藏所有被選元素。 true - 顯示元素 false - 隱藏元素