JQuery点击标题实现div的收缩

浏览数：8 / 时间：2015年06月09日

 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>