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