jQuery中的toggle()方法解析与实例

我们上一篇说了jQuery中的hover()方法，此方法属于jQuery中自定义的方法，说起来有点绕口。今天再说一说jQuery中另一个可以自定义的方法toggle()方法，这个方法在jQuery中有两种定义，我们下边分区来解释与举例

jQuery中的toggle()的第一种解释

toggle()方法：可以模拟鼠标的连续点击事件，第一次点击触发第一个函数，第二次点击触发第二个函数，第三次点击触发第三个函数，如果后面有更多的函数则依次触发，直到最后一个函数，然后再重复这个过程。

老规矩，举个例子

利用toggle()写一个点击按钮，依次改面网页的背景色

HTML代码

<button id='button'>点我测试</button>
<!--飞鸟慕鱼博客-->

JQ代码

$("#button").toggle(function(){
        $("body").css("background","red");
    },function(){
        $("body").css("background","green");
    },function(){
        $("body").css("background","blue");
})

结果：鼠标点击一次，会改变一次网页背景的颜色！

注意：此方法在JQ的1.8.1版本测试通过，高版本JQ已经废弃此方法！

jQuery中的toggle()的第二种解释

toggle():方法切换元素的可见状态

举例子，说明问题

利用jQ的toggle()方法，切换元素的可见与不可见的状态

HTML代码

<button id='button'>点我测试</button>
<!--飞鸟慕鱼博客-->
<p>飞鸟慕鱼博客欢迎您！</p>

JQ代码

$("#button").click(function(){
    $("p").toggle();
})

结果：点击测试按钮，P标签会在显示与隐藏之间切换！

注意：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。