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

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

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()方法,切换元素的可见与不可见的状态

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

HTML代码

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

JQ代码

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

结果:点击测试按钮,P标签会在显示与隐藏之间切换!

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