html 中文档树

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
 6     <style type="text/css">
 7         *{margin:0px;padding:0px;}
 8         body{font-size:12px;}
 9         
10         .box{margin:10px;padding:10px;}
11         .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
12         .box p{line-height:20px;}
13         strong{color:Red;margin-right:20px;}
14         
15         .treebox{margin:10px;padding:10px;width:380px;}
16         .treebox ul{list-style:none;margin-left:15px;}
17         .treebox>ul{list-style:none;margin-left:0px;}
18         .treebox ul li{margin:12px 20px;}
19         .treebox ul li label{list-style:none;cursor:pointer;line-height:16px;display:block;padding-left:20px;}
20         .treebox ul li label.collapse{background-image:url(images/treeplus.gif);background-repeat:no-repeat;}
21         .treebox ul li label.expand{background-image:url(images/treeminus.gif);background-repeat:no-repeat;}
22         #panels dt{height:30px;line-height:30px;padding-left:10px;border:1px solid #aaccff;font-weight:bold;font-size:14px;background-color:#bb44aa;margin-top:-1px;cursor:pointer;}
23         #panels dd{height:230px;padding:10px;line-height:20px;border:1px solid #aaccff;margin-top:-1px;}
24         
25     </style>
26   <script type="text/javascript">
27       $(function(){
28 
29         
30         $(".expand").click(function(){
31           //$(this).hide();
32          // $(this).children("li").hide();
33           //通过当前的元素，找到他的所有子孙
34           $(this).siblings().toggle();
35 
36         });
37 
38 
39 
40       });
41 
42   </script>
43 
44 </head>
45 <body>
46     <div class="box">
47         <h3><strong>选作</strong>本试题重点考察jquery构造树形控件，具体要求如下:</h3>
48         <p>
49             1.点击每个节点时，将其子节点显示或隐藏。<br />
50         </p>
51     </div>
52 
53     
54     <div class="treebox">
55         <ul>
56             <li>
57                 <label class="expand">河北省</label>
58                 <ul>
59                     <li><label>石家庄市</label></li>
60                     <li>
61                         <label class="expand">保定市</label>
62                         <ul>
63                             <li><label>望都县</label></li>
64                             <li><label>顺平县</label></li>
65                             <li><label>唐县</label></li>
66                         </ul>
67                     </li>
68                 </ul>
69             </li>
70             <li>
71                 <label class="expand">重庆市</label>
72                 <ul>
73                     <li>
74                         <label>沙坪坝区</label>
75                     </li>
76                     <li>
77                         <label>北碚区</label>
78                     </li>
79                     <li>
80                         <label>江北区</label>
81                     </li>
82                     <li>
83                         <label>南岸区</label>
84                     </li>
85                 </ul>
86             </li>
87             <li>
88                 <label>北京市</label>
89             </li>
90         </ul>
91     </div>
92 
93 
94 </body>
95 </html>