在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>
结果如下图所示: