jQuery中的toggle()方法解析与实例
墨初 前端设计 5770阅读
我们上一篇说了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 的元素)。