<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>展开收起</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $('#btn1').click(function(){ $('#div1').toggle(); }); $('#btn2').click(function(){ $('#div2').fadeToggle(); }); $('#btn3').click(function(){ if($('#div3').is(':visible')){ $('#div3').slideUp(); }else{ $('#div3').slideDown(); } }); }) </script> <style> #div1,#div2,#div3{ 500px; height:500px; background:red; display:none; } </style> </head> <body> <h2>toggle()</h2> <input type="button" value="toggle" id="btn1"/> <div id="div1"></div> <hr /> <h2>fadeToggle()</h2> <input type="button" value="fadeToggle" id="btn2"/> <div id="div2"></div> <hr /> <h2>slideDown(),slideUp</h2> <input type="button" value="downUp" id="btn3"/> <div id="div3"></div> </body> </html>