jquery之toggle方法使用详解
toggle英文翻译为切换，转换，指2种状态之间进行切换。
大部分人对jquery中toggle的用法都是只知其一，不知其二。
toggle功能定义
1、添加两个或多个函数，以响应被选元素的 click 事件之间的切换。当在元素上点击时调用第一个指定函数，当再次点击时调用第二个函数，以此类推。
2、toggle方法切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
toggle语法：
$(selector).toggle(speed,callback,switch)
参数示意：
| 参数 | 描述 |
|---|---|
| speed |
可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。 可能的值：
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。 如果设置此参数，则无法使用 switch 参数。 |
| callback |
可选。toggle 函数执行完之后，要执行的函数。 如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。 除非设置了 speed 参数，否则不能设置该参数。 |
| switch |
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
如果设置此参数，则无法使用 speed 和 callback 参数。 |
通过上面我们知道，toggle的三个参数都是可选的，下面我们来做几个示例给大家看下jQuery toggle() 的使用方法。
绑定多个函数，多次点击依次切换执行
<div id="btntest">我是动态显示的</div>
$("#btntest").toggle(
function(){
$("div").html("第一次点击执行！");
},
function(){
$("div").html("第二次点击执行！");
});
});
切换元素的显示与隐藏效果，这是toggle比较常见的用法。
<input id="btntest" type="button" value="点一下我" />
<div>我是动态显示的</div>
$('#btntest').click(function () {
$("div").toggle(500);
})
此处的 500 是隐藏显示的延迟时间，默认为0，也可以用"slow","normal"或"fast"
如果里面的值为true（toggle(true)）时只能显示元素，值为false（toggle(false)）时只能隐藏元素。
上例中toggle不像bind需要在后面添加"click"来绑定click触发事件，toggle本身就是click触发的（而且只能click触发）
要点总结：
1、toggle只能绑定在click事件上，只有click事件才可以触发。
2、toggle() 方法在 jQuery 版本 1.8 中被废弃，在版本 1.9 中被移除。
3、toggle可以绑定两个或两个以上的函数，依次执行。
4、切换元素的显示与隐藏效果
版权声明
本站部分原创文章，部分文章整理自网络。如有转载的文章侵犯了您的版权，请联系站长删除处理。如果您有优质文章，欢迎发稿给我们！联系站长：
愿本站的内容能为您的学习、工作带来绵薄之力。
评论