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>
