在看《鋒利的jQuery》的時候，有講到toggle()方法，例子中說的是點擊元素，會再顯示和隱藏狀態進行切換，但是我按著例子謝了一遍，發現被綁定toggle()的元素直接被隱藏了，查詢發現是因為jquery1.9版本之后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'可以判斷某元素的顯示或者隱藏狀態，故實現這個功能。

總結

以上是生活随笔為你收集整理的JQuery新版本的toggle()方法把元素隐藏了的原因分析及解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。