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>
