JQuery的toggle()方法把元素隱藏了的解決方案

JQuery的toggle()方法把元素隱藏了的解決方案

JQuery的toggle（）本來是用來切換幾種狀態之間的變化的，但是我們在使用的時候，遇到了一種情況就是被綁定toggle()的元素被隱藏了，根本沒有達到我們要的效果，本文將解釋這種情況的原因。

1. toggle()原本應該實現的功能
   

   由上圖可以看到，不斷按下按鈕，頁面的顏色將會被不斷改變，然後重複循環。其循環的過程是根據函數的書寫順序，如下
   

   $(document).ready(function(){
     $("button").toggle(function(){
       $("body").css("background-color","green");},
       function(){
       $("body").css("background-color","red");},
       function(){
       $("body").css("background-color","yellow");}
     );
   });

2. toggle()現在使用發生的情況

   如果現在採用最新的Jquery版本來書寫代碼，那麼如果用到了toggle()這個函數，將會發現被綁定的那個元素如果本來是顯示的，那麼將被隱藏，如果原本那個元素是隱藏的，將會被顯示。

3. 原因

   爲什麼會出現這種情況，原來在jQuery 1.9版本之後，toggle()發生了變化，以下是官網的Notes:

   Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation methodnamed .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of argumentspassed.

   在早期的版本，存在兩個同名的toggle()，但是所執行的方法卻是不一樣的：
   第一種：

   .toggle( handler(eventObject), handler(eventObject) [, handler(eventObject) ] ) 

   Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.

   第二種：

   .toggle( [duration ] [, complete ] ) 

   Description: Display or hide the matched elements.

   而之後的版本把第一個toggle()函數給去掉了，導致用於調用切換功能時會把元素隱藏了。

4. 現在新版本下的toggle()的功能實現

   通過上圖W3C的實例可以看到，按下按鈕，<p>This is a paragraph.</p>裏面的代碼將會消失，再按一次，代碼裏面的內容將再次被顯示，再按下就是消失，如此循環重複。

5. 其他的實現顯示\隱藏切換的方法

   $(".menu-title").click(function() {
       if ($(this).next().css('display') == 'block') {
           $(this).css("background-color", "#203263");
           $(this).next().slideUp();
       }else {
           $(".menu-title").css("background-color", "#203263");
           $(this).css("background-color", "#204494");
           $(".menu").slideUp();
           $(this).next().slideDown();
       }
   });

   通過$(this).next().css('display') == 'block'可以判斷某元素的顯示或者隱藏狀態，故實現這個功能。