快捷導(dǎo)航

JQuery toggle使用分析

更新時(shí)間：2009年11月16日 21:30:34 作者：

今天針對(duì)這個(gè)JQuery里面的toggle聊幾句，文章中涉及到了一些問(wèn)題望牛牛們能幫忙解惑一下。

今天重點(diǎn)一個(gè)toggle(fn,fn,….)函數(shù),主要是用來(lái)切換某個(gè)事件的輪換操作。
比如：對(duì)一個(gè)按鈕的點(diǎn)擊事件和一個(gè)DIV的背景，點(diǎn)擊一次按鈕，將DIV的背景顯示為藍(lán)色，點(diǎn)擊第二次的時(shí)候要將DIV的
背景色改為黑色。
我們定義的HTML代碼如下：
<body>
<input type="button" id="btnShow" value="Toggle"/>
<div id="DivToggle">此處顯示 id "DivToggle" 的內(nèi)容</div>
</body>
定義的最初的樣式如下：

復(fù)制代碼代碼如下:

 
#DivToggle { 
height: 150px; 
width: 200px; 
margin: 50px; 
background-color: #6CC; 
} 

在toggle(fn,fn,….);先明白一個(gè)toggle()的函數(shù)，主要是用來(lái)切換元素的顯示狀態(tài)。如果一個(gè)元素是顯示的，那么調(diào)用.toggle()之后就變得隱藏了。

JQuery代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$( 
function() { 
$("#btnShow").click(function(event) { 
$("#DivToggle").toggle(); 
}); 
} 
); 
</script> 

點(diǎn)擊按鈕之后DIV隱藏，再次點(diǎn)擊DIV顯示，然后循環(huán)。

這里我們可以手動(dòng)設(shè)置元素的顯示和隱藏，顯示：toggle(true);隱藏：toggle(false);

我們還可以為元素的隱藏和顯示設(shè)置速度。

$("#DivToggle").toggle(600);

當(dāng)然到這里我們可以想到我們經(jīng)常在網(wǎng)頁(yè)中碰到的將鼠標(biāo)移上去顯示出來(lái)，然后鼠標(biāo)移開則隱藏掉的效果。

這里當(dāng)然用到了一個(gè)hover(fnover,fnout)事件。我們只要將fnover,和fnout設(shè)置為以上的toggle(600)即可;

這里的fnover是鼠標(biāo)移上去的事件函數(shù)， fnout是鼠標(biāo)移開的事件函數(shù)。

我們將toggle(600)單獨(dú)設(shè)置為一個(gè)函數(shù)來(lái)調(diào)用，這樣看起來(lái)代表比較易讀。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$( 

function(event) { 
$("#btnShow").hover(OverOut, OverOut); 
function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
} 
); 
</script> 

這樣我們把鼠標(biāo)移動(dòng)到按鈕上面，然后移開，就可以看到DivToggle的隱藏和顯示的效果了。

為了演示toggle(fn,fn,…)是輪換操作的，我們使用上面的一個(gè)函數(shù)，然后再加一個(gè)使用btnShow的Click事件先隱藏顯示DIV,然后該表DIV的樣式。

顯示隱藏的代碼可以這樣（事實(shí)上這段代碼是有問(wèn)題的，但是居然這樣寫也能實(shí)現(xiàn)要的效果）：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$( 
function(event) { 
function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
$("#DivToggle").toggle(function() { 
$("#btnShow").click(OverOut); 
}, function() { 
$("#btnShow").click(OverOut); 
}); 
} 
); 
</script> 

回過(guò)頭來(lái)看這段代碼覺(jué)得很有問(wèn)題，本身toggle(fn,fn,…)是用來(lái)給指定的元素加上Click事件，然后再對(duì)這個(gè)元素循環(huán)做toggle
里面的那些函數(shù)。突然感覺(jué)有點(diǎn)攪在那里了。像麻花一樣。望牛牛能解釋一下。
這樣為了演示toggle的輪循函數(shù)的效果就沒(méi)有辦法，通過(guò)單擊按鈕，再改變Div的樣式了。
改變DIV樣式的代碼這樣：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$( 
function(event) { 
function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 
$("#DivToggle").toggle(function() { 
$(this).click(function() { $(this).css("background", "Blue"); }); 
}, function(event) { 
$(this).click(function() { $(this).css("background", "Green"); }); 
}); 
} 
); 
</script> 

到這里我突然想到，要實(shí)現(xiàn)以上的效果，那就直接把事件加載到按鈕上，也就是”btnShow”上面也就是先隱藏顯示，然后改變DIV的樣式。詳細(xì)的代碼如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$( 
function(event) { 

function OverOut(event) { 
$("#DivToggle").toggle(600); 
} 

$("#btnShow").toggle( 
OverOut, OverOut, 
function() { $("#DivToggle").css({ "background": "Green" }); }, 
function() { $("#DivToggle").css({ "background": "Blue" }); } 
); 

} 
); 
</script> 