toggle

英[?t?gl]? ?美[?tɑ:gl]??

n.棒形紐扣;套索扣;轉(zhuǎn)換鍵;切換鍵

v.切換

jquery的toggle()方法 語(yǔ)法

作用:toggle() 方法用於綁定兩個(gè)或多個(gè)事件處理器函數(shù),以回應(yīng)被選元素的輪流的 click 事件。此方法也可用來(lái)切換被選元素的?hide()?與?show()?方法。

綁定兩個(gè)或多個(gè)函數(shù)與toggle事件:當(dāng)指定元素被點(diǎn)擊時(shí),在兩個(gè)或多個(gè)函數(shù)之間輪流切換。如果規(guī)定了兩個(gè)以上的函數(shù),則 toggle() 方法將切換所有函數(shù)。例如,如果存在三個(gè)函數(shù),則第一次點(diǎn)擊將呼叫第一個(gè)函數(shù),第二次點(diǎn)擊呼叫第二個(gè)函數(shù),第三次點(diǎn)擊呼叫第三個(gè)函數(shù)。第四次點(diǎn)擊再次呼叫第一個(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è)元素是否可見(jiàn)。如果元素已隱藏,則執(zhí)行 show()。如果元素可見(jiàn),則元素 hide()。這樣就可以創(chuàng)造切換效果。

語(yǔ)法:$(selector).toggle(speed,callback)

參數(shù):

參數(shù)說(shuō)明
speed? ??可選。規(guī)定 hide/show 效果的速度。預(yù)設(shè)是 "0"。可能的值:毫秒(例如 1500)"slow"? "normal""fast"?
callback可選。當(dāng) toggle() 方法完成時(shí)執(zhí)行的函數(shù)。


顯示或隱藏元素:
規(guī)定是否只顯示或只隱藏所有符合的元素。

語(yǔ)法:$(selector).toggle(switch)

參數(shù):

參數(shù)說(shuō)明
switch? ??#必要。布林值,規(guī)定 toggle() 是否應(yīng)只顯示或只隱藏所有被選元素。 true - 顯示元素false - 隱藏元素
#

jquery的toggle()方法 範(fàn)例

<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)擊這里,來(lái)切換不同的背景顏色</button>
</body>
</html>
執(zhí)行實(shí)例 ?

#點(diǎn)擊 "執(zhí)行實(shí)例" 按鈕查看線上實(shí)例

#