简单方法替换toggle，实现同样的功能_JS、jQ、TS_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

简单方法替换toggle，实现同样的功能

来源：未知作者：类型：文章教程点击次数：发布时间：2014-06-12 14:52:26

jQuery的toggle很好用，运行下面的代码查看toggle的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery toggle方法 ---- 网站模板</title> </head> <body> <div style="width:200px; height:200px; background:red;"></div> <script language="javascript"> $(function(){ $("div").toggle( function(){$(this).css("background","green");}, function(){$(this).css("background","blue");}, function(){$(this).css("background","yellow");}, function(){$(this).css("background","red");} ); }) </script> </body> </html>
提示：您可以先修改部分代码再运行

可是，toggle虽好，官方却弃之。官方自有官方的理，既然不能用了，就用下面的方法，简单实现了toggle的功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单方法替换toggle，实现同样的功能</title> </head> <body> <div style="width:200px; height:200px; background:red;"></div> <script language="javascript"> $(function(){ var i = 1; $("div").click(function(){ if(i==1){ $(this).css("background","green"); i=2; }else if(i==2){ $(this).css("background","blue"); i=3; }else if(i==3){ $(this).css("background","yellow"); i=4; }else if(i==4){ $(this).css("background","red"); i=1; } }) }) </script> </body> </html>
提示：您可以先修改部分代码再运行

方法很简单，在这里不做详细说明。