1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>jquery 收缩展开效果</title> 6 <script src="Scripts/jquery-1.7.1.js"></script> 7 <style> 8 /* 收缩展开效果 */ 9 .text 10 { 11 line-height: 22px; 12 padding: 0 6px; 13 color: #666; 14 } 15 16 .box h1 17 { 18 padding-left: 10px; 19 height: 22px; 20 line-height: 22px; 21 background: #f1f1f1; 22 font-weight: bold; 23 } 24 25 .box 26 { 27 position: relative; 28 border: 1px solid #e7e7e7; 29 } 30 31 h1 32 { 33 font-size: 16px; 34 } 35 </style> 36 </head> 37 <body> 38 <script type="text/javascript"> 39 // 收缩展开效果 40 $(document).ready(function () { 41 $("div.text").hide();//默认隐藏div，或者在样式表中添加.text{display:none}，推荐使用后者 42 $(".box h1").click(function () { 43 $(this).next(".text").slideToggle("slow"); 44 }) 45 }); 46 </script> 47 <!-- 收缩展开效果 --> 48 <div class="box"> 49 <h1>收缩展开效果</h1> 50 <div class="text"> 51 1<br /> 52 2<br /> 53 3<br /> 54 4<br /> 55 5<br /> 56 </div> 57 </div> 58 <br /> 59 <div class="box"> 60 <h1>收缩展开效果</h1> 61 <div class="text"> 62 1<br /> 63 2<br /> 64 </div> 65 </div> 66 </body> 67 </html>