toggle()方法

最新推荐文章于 2025-06-17 13:51:50 发布

weixin_30767921

最新推荐文章于 2025-06-17 13:51:50 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/baixc/p/3390843.html

在toggle()方法中，可以依次调用N个指定的函数。直到最后一个函数，然后重复对这些函数轮番调用。
toggle()方法的功能是每次单机后依次调用函数，请注意到“依次”这两个字，说明该方法在调用函数时并非随机或指定调用，而是用过函数设置的前后顺序进行调用，其调用的语法格式如下：

toggle(fn,fn2,fn3,[fun4,fn5....])　　其中参数fn,fn2...,fnN为单机时被依次调用的函数。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5 <title>toggle切换事件</title>
 6 <style>
 7     .box{border: solid 1px #666;background-color: orange;height: 100px;width: 100px;}
 8 </style>
 9 <script src="jquery.js"></script>
10 <script>
11     $(function(){
12         $(".box").toggle(function(){
13             $(this).css("background-color","red");
14         },function(){
15             $(this).css("background-color","green");
16         },function(){
17             $(this).css("background-color","orange");
18         })
19     })
20 </script>
21 </head>
22 <body>
23     <h3>功能描述：</h3>
24     <p>在页面中，设置一个色块，当用户第一次单机该色块时，变换其颜色，</p><p>第二次单机时，变为另一个颜色。。第三次单机是，返回第一次单机前的颜色</p>
25     <div class="box"></div>
26 </body>
27 </html>