實例
切換不同的背景色:
$("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() 是否應只顯示或只隱藏所有被選元素。 |