标签：
看《jQeury 权威指南》时看到这个toggle()方法。因为之前在慕课网学习接触过。发现两者讲的有细微的不同
以隐藏/显示目标元素效果为例，慕课网是这样讲解的
$("#clickId").toggle(
function(){$(‘#divId‘).hide();}, //方法之间以逗号隔开
function(){$(‘#divId‘).show();}
);
点击ID名为clickId的按钮，第一次会执行第一个function来隐藏ID名为divId的块。第二次点击会显示。第三次点击再次执行隐藏，以此类推。
同样一个功能，而《jQeury 权威指南》中是这样讲解用法的。
$("#clickId").click(function() {
$("divId").toggle();
})
使用toggle()的无参数方法来
同样的隐藏/显示目标元素的效果，《jQuery 权威指南》的处理方式显得更加简洁。使用无参方法时，只有2种状态。但是当需要切换2种以上的状态时，就只能使用慕课网的方法了。下面讲解toggle()方法可以实现多函数绑定
<body>
<input id="btntest" type="button" value="点一下我" />
<div>你好，请选择佳丽</div>
<script type="text/javascript">
$(function(){
$("#btntest").toggle(
function(){
$("div").html("1号范冰冰");
},function(){
$("div").html("2号李冰冰");
},function() {
$("div").html("3号杨幂");
},function() {
$("div").html("4号姚晨");
}
)
})
</script>
</body>
以下是运行结果。可见toggle（）方法可以绑定多个函数，使用相当灵活。
toggle有3种调参的方法。上面讲了第一种无参使用方法，下面是第二种
toggle(switch)
switch是布尔类型的 数值是true或者false （若使用布尔值。则无法使用第三种speed参数方法）
var intI = 0;
var blnA = intI > 1; //获取逻辑值false;
$("img").toggle(blnA);
此时的blnA值是false。所以他能将"img"图片隐藏。
第三种是
$(selector).toggle(speed,callback)
speed是触发事件后执行的事件，可能的值：
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。也就是动画效果了
callback是整个toggle()方法执行完之后触发的事件，和上面的多函数绑定是不同的，一定要设置speed参数才能使用callback参数。
在1.8.2及之前的版本可以使用toggle,但在1.9版本之后就将其删除了（挺好用的，不知道为什么删除了=.=！）
那么就要用手动方式来代替他了，或者使用过渡版本的jQuery，下面是手动方式。
//使用toggle方法时
$(‘button‘).click(function(){$("img").toggle();}) //手动实现toggle()方法 $(‘button‘).click(function(){ if($("img").is(":hidden")){ $("img").show(); }else{ $("img").hide(); } })
部分数据参考w3school
http://www.w3school.com.cn/jquery/effect_toggle.asp
标签：
原文地址：http://www.cnblogs.com/lijinwen/p/5437031.html
