toggle
英 [?t?gl]? ?美 [?tɑ:gl]??
n.棒形紐扣;套索扣;轉(zhuǎn)換鍵;切換鍵
v.切換
jquery toggle()方法 語(yǔ)法
作用:toggle() 方法用于綁定兩個(gè)或多個(gè)事件處理器函數(shù),以響應(yīng)被選元素的輪流的 click 事件。該方法也可用于切換被選元素的?hide()?與?show()?方法。
向toggle事件綁定兩個(gè)或多個(gè)函數(shù):當(dāng)指定元素被點(diǎn)擊時(shí),在兩個(gè)或多個(gè)函數(shù)之間輪流切換。如果規(guī)定了兩個(gè)以上的函數(shù),則 toggle() 方法將切換所有函數(shù)。例如,如果存在三個(gè)函數(shù),則第一次點(diǎn)擊將調(diào)用第一個(gè)函數(shù),第二次點(diǎn)擊調(diào)用第二個(gè)函數(shù),第三次點(diǎn)擊調(diào)用第三個(gè)函數(shù)。第四次點(diǎn)擊再次調(diào)用第一個(gè)函數(shù),以此類推。
語(yǔ)法:$(selector).toggle(function1(),function2(),functionN(),...)
參數(shù):
參數(shù) | 描述 |
function1()? | 必需。規(guī)定當(dāng)元素在每偶數(shù)次被點(diǎn)擊時(shí)要運(yùn)行的函數(shù)。 |
function2() | ?必需。規(guī)定當(dāng)元素在每奇數(shù)次被點(diǎn)擊時(shí)要運(yùn)行的函數(shù)。 |
functionN(),...? | 可選。規(guī)定需要切換的其他函數(shù)。 |
Hide()和Show():檢查每個(gè)元素是否可見。如果元素已隱藏,則運(yùn)行 show()。如果元素可見,則元素 hide()。這樣就可以創(chuàng)造切換效果。
語(yǔ)法:$(selector).toggle(speed,callback)
參數(shù):
參數(shù) | 描述 |
speed? ?? | 可選。規(guī)定 hide/show 效果的速度。默認(rèn)是 "0"??赡艿闹担汉撩耄ū热?1500)"slow"? "normal""fast"? |
callback | 可選。當(dāng) toggle() 方法完成時(shí)執(zhí)行的函數(shù)。 |
顯示或隱藏元素:規(guī)定是否只顯示或只隱藏所有匹配的元素。
語(yǔ)法:$(selector).toggle(switch)
參數(shù):
參數(shù) | 描述 |
switch? ?? | 必需。布爾值,規(guī)定 toggle() 是否應(yīng)只顯示或只隱藏所有被選元素。true - 顯示元素false - 隱藏元素 |
jquery toggle()方法 示例
<html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").toggle(function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} ); }); </script> </head> <body> <button>請(qǐng)點(diǎn)擊這里,來切換不同的背景顏色</button> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例