宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取

在看《锋利的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'可以判断某元素的显示或者隐藏状态，故实现这个功能。