<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> body{font-size: 13px;} .divFrame{width: 180px;} .divFrame .divMenu{float: left;} .divFrame .divContent{float: right;} .divFrame .divContent div{display: none;width: 50px;height: 50px;background: orange;} .btn{border: solid 1px #666;padding: 2px;width: 80px;margin-bottom: 5px;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> <script> $(function(){ $("input:eq(0)").click(function(){ //无参数方法 $("#box").toggle(); }); $("input:eq(1)").click(function(){ //根据参数switch显示 var intI = 0; var blnA = intI > 1; //获取逻辑值，这里为false $("#box").toggle(blnA); }); $("input:eq(2)").click(function(){ //动画方式显示 $("#box").toggle(3000,function(){ $(this) //以动画方式显示，并执行回调函数 .css({"border":"solid 1px #ccc","padding":"2px"}); }); }); }) </script> </head> <body> <div class="divFrame"> <div class="divMenu"> <input type="button" value="无参数" class="btn" id="Button1" /><br /> <input type="button" value="逻辑显示" class="btn" id="Button2" /><br /> <input type="button" value="动画显示" class="btn" id="Button3" /> </div> <div class="divContent"> <div id="box"></div> </div> </div> </body> </html>
结果如下图所示：
形式一、无参数调用格式： toggle()
形式二、逻辑参数调用格式： toggle(switch)
参数switch为一个布尔值，即true或false。当该值为true时，显示元素，反之隐藏。
形式三、动画效果调用格式： toggle(speed,[callback])
与show(speed,[callback])种的参数所表示的意义是一样的。