今天針對這個JQuery裡面的toggle聊幾句，文章中涉及到了一些問題望牛牛們能幫忙解惑一下。
今天重點一個toggle(fn,fn,….)函數,主要是用來切換某個事件的輪換操作。
比如：對一個按鈕的點擊事件和一個DIV的背景，點擊一次按鈕，將DIV的背景顯示為藍色，點擊第二次的時候要將DIV的
背景色改為黑色。
我們定義的HTML代碼如下：
1: <body>
2: <input type="button" id="btnShow" value="Toggle"/>
3: <div id="DivToggle">此處顯示 id "DivToggle" 的內容</div>
4: </body>
定義的最初的樣式如下：
1: #DivToggle {
2: height: 150px;
3: width: 200px;
4: margin: 50px;
5: background-color: #6CC;
6: }
在toggle(fn,fn,….);先明白一個toggle()的函數，主要是用來切換元素的顯示狀態。如果一個元素是顯示的，那麼調用.toggle()之後就變得隱藏了。
JQuery代碼：
1: <script type="text/javascript">
2: $(
3: function() {
4: $("#btnShow").click(function(event) {
5: $("#DivToggle").toggle();
6: });
7: }
8: );
9: </script>
點擊按鈕之後DIV隱藏，再次點擊DIV顯示，然後迴圈。
這裡我們可以手動設定元素的顯示和隱藏，顯示：toggle(true);隱藏：toggle(false);
我們還可以為元素的隱藏和顯示設定速度。
1: $("#DivToggle").toggle(600);
當然到這裡我們可以想到我們經常在網頁中碰到的將滑鼠移上去顯示出來，然後滑鼠移開則隱藏掉的效果。
這裡當然用到了一個hover(fnover,fnout)事件。我們只要將fnover,和fnout設定為以上的toggle(600)即可;
這裡的fnover是滑鼠移上去的事件函數， fnout是滑鼠移開的事件函數。
我們將toggle(600)單獨設定為一個函數來調用，這樣看起來代表比較易讀。
1: <script type="text/javascript">
2: $(
3:
4: function(event) {
5: $("#btnShow").hover(OverOut, OverOut);
6: function OverOut(event) {
7: $("#DivToggle").toggle(600);
8: }
9: }
10: );
11: </script>
這樣我們把滑鼠移動到按鈕上面，然後移開，就可以看到DivToggle的隱藏和顯示的效果了。
為了示範toggle(fn,fn,…)是輪換操作的，我們使用上面的一個函數，然後再加一個使用btnShow的Click事件先隱藏顯示DIV,然後該表DIV的樣式。
顯示隱藏的代碼可以這樣（事實上這段代碼是有問題的，但是居然這樣寫也能實現要的效果）：
1: <script type="text/javascript">
2: $(
3: function(event) {
4: function OverOut(event) {
5: $("#DivToggle").toggle(600);
6: }
7: $("#DivToggle").toggle(function() {
8: $("#btnShow").click(OverOut);
9: }, function() {
10: $("#btnShow").click(OverOut);
11: });
12: }
13: );
14: </script>
回過頭來看這段代碼覺得很有問題，本身toggle(fn,fn,…)是用來給指定的元素加上Click事件，然後再對這個元素迴圈做toggle
裡面的那些函數。突然感覺有點攪在那裡了。像麻花一樣。望牛牛能解釋一下。
這樣為了示範toggle的輪循函數的效果就沒有辦法，通過單擊按鈕，再改變Div的樣式了。
改變DIV樣式的代碼這樣：
1: <script type="text/javascript">
2: $(
3: function(event) {
4: function OverOut(event) {
5: $("#DivToggle").toggle(600);
6: }
7: $("#DivToggle").toggle(function() {
8: $(this).click(function() { $(this).css("background", "Blue"); });
9: }, function(event) {
10: $(this).click(function() { $(this).css("background", "Green"); });
11: });
12: }
13: );
14: </script>
到這裡我突然想到，要實現以上的效果，那就直接把事件載入到按鈕上，也就是”btnShow”上面也就是先隱藏顯示，然後改變DIV的樣式。詳細的代碼如下：
1: <script type="text/javascript">
2: $(
3: function(event) {
4:
5: function OverOut(event) {
6: $("#DivToggle").toggle(600);
7: }
8:
9: $("#btnShow").toggle(
10: OverOut, OverOut,
11: function() { $("#DivToggle").css({ "background": "Green" }); },
12: function() { $("#DivToggle").css({ "background": "Blue" }); }
13: );
14:
15: }
16: );
17: </script>
這樣能實現以上要的效果，就是先隱藏，再顯示，再改變樣式。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
