最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery中toggle()方法的用法
时间：2013-05-24 编辑：简简单单 来源：一聚教程网
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素；如果被选元素隐藏，则显示这些元素。
$(selector).toggle(speed,callback,switch);
该方法又可分解为：
$(selector).toggle(speed,callback);//参数可选
$(selector).toggle(switch);// switch为true时显示，switch为false时隐藏；
Speed：调整动画状态：渐变对象宽高、透明度等；
Callback：回调函数；
Switch：切换开关“参数”—switch与speed和callback不能共存
Query中toggle()方法的效果就是切换元素的可见状态；即如果元素是可见的，切换为隐藏的；如第二世界整理发布果元素是隐藏的，切换为可见的。
toggle()
例子：
| 代码如下 | 复制代码 |
| $(function(){ $("#content").toggle(); }) |
|
当有点击事件时，另一区域可见状态切换可以这么写：
| 代码如下 | 复制代码 |
| $(document).ready(function(){ $("#test").click( function(){ $("#content").toggle(); } ); }); |
|
当点击上面的“点击这里“字样，这里的内容将隐藏与显示之间切换
下面说一下toggle(fn,fn)方法的使用，效果是：每次点击后依次调用函数；如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。注意这里本身已经有点击触发调用函数的功能，不需要另外.click(fn)了，我一开始操作此函数时就犯了错。
例子：
| 代码如下 | 复制代码 |
|
$(document).ready(function(){ |
|
当点击上面的“点击这里“字样，这里的内容将隐藏与显示之间切换
toggle(fn1, fn2, fn3, fn4。。。)方法—鼠标单击后依次循环调用函数
| 代码如下 | 复制代码 |
|
$("p").toggle( function(){ $("body").css("background-color","green");}, function(){ $("body").css("background-color","red");}, function(){ $("body").css("background-color","yellow");} ); |
|
当指定元素被点击时，在两个或多个函数之间轮流切换。
如果规定了两个以上的函数，则 toggle() 方法将切换所有函数。
Toggle的参数个数为有限个。
slideToggle方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。给“内容”添加slideToggle()事件，代码如下：
$("#panel h5.head").toggle(function () {
$(this).next().slideUp();
}, function () {
$(this).next().slideDown();
});