JQuery toggle使用分析
2024-05-06 14:12:47
供稿：網友
今天重點一個toggle(fn,fn,….)函數,主要是用來切換某個事件的輪換操作。
比如：對一個按鈕的點擊事件和一個DIV的背景，點擊一次按鈕，將DIV的背景顯示為藍色，點擊第二次的時候要將DIV的
背景色改為黑色。
我們定義的HTML代碼如下：
<body>
<input type="button" id="btnShow" value="Toggle"/>
<div id="DivToggle">此處顯示 id "DivToggle" 的內容</div>
</body>
定義的最初的樣式如下：
代碼如下:
#DivToggle {
height: 150px;
width: 200px;
margin: 50px;
background-color: #6CC;
}
在toggle(fn,fn,….);先明白一個toggle()的函數，主要是用來切換元素的顯示狀態(tài)。如果一個元素是顯示的，那么調用.toggle()之后就變得隱藏了。
JQuery代碼：
代碼如下:
<script type="text/javascript">
$(
function() {
$("#btnShow").click(function(event) {
$("#DivToggle").toggle();
});
}
);
</script>
點擊按鈕之后DIV隱藏，再次點擊DIV顯示，然后循環(huán)。
這里我們可以手動設置元素的顯示和隱藏，顯示：toggle(true);隱藏：toggle(false);
我們還可以為元素的隱藏和顯示設置速度。
$("#DivToggle").toggle(600);
當然到這里我們可以想到我們經常在網頁中碰到的將鼠標移上去顯示出來，然后鼠標移開則隱藏掉的效果。
這里當然用到了一個hover(fnover,fnout)事件。我們只要將fnover,和fnout設置為以上的toggle(600)即可;
這里的fnover是鼠標移上去的事件函數， fnout是鼠標移開的事件函數。
我們將toggle(600)單獨設置為一個函數來調用，這樣看起來代表比較易讀。
代碼如下:
<script type="text/javascript">
$(
function(event) {
$("#btnShow").hover(OverOut, OverOut);
function OverOut(event) {
$("#DivToggle").toggle(600);
}
}
);
</script>
這樣我們把鼠標移動到按鈕上面，然后移開，就可以看到DivToggle的隱藏和顯示的效果了。
為了演示toggle(fn,fn,…)是輪換操作的，我們使用上面的一個函數，然后再加一個使用btnShow的Click事件先隱藏顯示DIV,然后該表DIV的樣式。
顯示隱藏的代碼可以這樣（事實上這段代碼是有問題的，但是居然這樣寫也能實現要的效果）：
代碼如下:
<script type="text/javascript">
$(
function(event) {
function OverOut(event) {
$("#DivToggle").toggle(600);
}
$("#DivToggle").toggle(function() {
$("#btnShow").click(OverOut);
}, function() {
$("#btnShow").click(OverOut);
});
}
);
</script>
回過頭來看這段代碼覺得很有問題，本身toggle(fn,fn,…)是用來給指定的元素加上Click事件，然后再對這個元素循環(huán)做toggle
里面的那些函數。突然感覺有點攪在那里了。像麻花一樣。望牛牛能解釋一下。
