toggle()方法

在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>

结果如下图所示:

高否?富否?帅否? 否? 滚去学习!
原文地址:https://www.cnblogs.com/baixc/p/3390843.html