jQuery-toggle()方法介紹

jQuery-toggle()方法介紹
toggle 在英文裡翻譯成切換，當名詞及動詞時解釋意思又不太一樣
n.棒形紐扣; 套索扣; 轉換鍵; 切換鍵
v.切換
而在 jQuery 的世界裡可以很常看到這個方法，初步整理一下我們最常用在效果 effect 及事件 event 部分。
以下分別說明這兩者用法之處：
1.jQuery 效果 - toggle() 方法
範例

切換 <p> 元素的顯示與隱藏狀態：

$(".btn1").click(function(){
  $("p").hide();
});

定義和用法

toggle() 方法切換元素的可見狀態。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
語法

$(selector).toggle(speed,callback,switch)

2.jQuery 事件 - toggle() 方法

範例

切換不同的背景色：

$("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(),...)

總結
下看到 toggle 時除了應用在顯示隱藏效果時，我們也可以拿來跟不同的函式之間的切換，在 web 的世界中，這個功能是很常被使用的。