1 <!DOCTYPE html>
2 <head>
3 <meta charset="utf-8"/>
4 <title>树形菜单</title>
5 <style type="text/css" media="all">
6 a,a:visited {
7 color:#333;
8 text-decoration:none;
9 }
10 a:hover {
11 color:#f60;
12 }
13 body,td {
14
15 font:13px "Geneva","宋体", "Arial", "Helvetica",sans-serif;
16
17 }
18
19 ul,li {
20 margin:0;
21 padding:0;
22 list-style:none;
23 }
24 h1,h2,h3,h4,h5,h6 {
25 margin:0;
26 padding:0;
27 }
28 h1 {
29 padding:5px;
30 color:#900;
31 font:16px bold "Geneva","宋体", "Arial", "Helvetica",sans-serif;
32 }
33 h1 small {
34 font-size:11px;
35 font-weight:normal;
36 color:#660;
37 }
38 .TreeWrap {
39 width:200px;
40 }
41 .MenuBox .titBox a,
42 .MenuBox .titBox a:visited,
43 .MenuBox2 .titBox a,
44 .MenuBox2 .titBox a:visited {
45 margin-left:10px;
46 padding-left:40px;
47 color:#003;
48 font-size:12px;
49 display:block;
50 }
51 .MenuBox .titBox h3 a {
52 background:url(img/st_folder_open.gif) no-repeat 0 40%;
53 }
54 .MenuBox .titBox h3.Fst a {
55 background:url(img/st_folder_open.gif) no-repeat 0 40%;
56 }
57 .MenuBox .titBox h3.Lst a {
58 background:url(img/st_folder.gif) no-repeat 0 40%;
59 }
60 .MenuBox2 .titBox h3 a {
61 background:url(img/st_folder.gif) no-repeat 0 40%;
62 }
63 .MenuBox2 .titBox h3.Fst a {
64 background:url(img/st_folder.gif) no-repeat 0 40%;
65 }
66 .MenuBox2 .titBox h3.Lst a {
67 line-height:250%;background:url(img/st_folder.gif) no-repeat 0 0;
68 }
69 /*这句是关键*/
70 .MenuBox2 .txtBox {
71 display:none;
72 }
73
74 .MenuBox .txtBox ul li {
75 padding-left:65px;
76 line-height:150%;
77 }
78 .MenuBox .txtBox .num {
79 color:#e00;
80 }
81 .MenuBox .txtBox ul {
82 background:url(images/line_y.gif) repeat-y 16px 0;
83 }
84 .MenuBox .txtBox ul li {
85 background:url(images/t.gif) no-repeat 28px 50%;
86 }
87 .MenuBox .txtBox ul li.Lst {
88 background:url(images/t_lst.gif) no-repeat 28px 50%;
89 }
90
91
92
93 </style>
94 <script type="text/javascript">
95
96 function ExChgClsName(Obj,NameA,NameB){
97
98 var Obj = document.getElementById(Obj) ? document.getElementById(Obj):Obj;
99
100 Obj.className = Obj.className == NameA?NameB:NameA;
101
102 }
103
104 function showMenu(iNo){
105
106 ExChgClsName("Menu_"+iNo,"MenuBox","MenuBox2");
107
108 }
109
110 </script>
111 </head>
112 <body>
113
114
115 <h1>欢迎各位欣赏 <small>我的QQ列表</small></h1>
116
117 <div class="TreeWrap">
118 <div class="MenuBox" id="Menu_0">
119 <div class="titBox"><h3 class="Fst"><a href="javascript:showMenu(0);">同事</a></h3>
120 </div>
121 <div class="txtBox">
122 <ul>
123 <li><a href="#">西伯利亚狼</a></li>
124 <li><a href="#">小春</a></li>
125 <li><a href="#">小林</a></li>
126 <li><a href="#">小龙</a></li>
127 <li class="Lst"><a href="#">开心果😊</a></li>
128 </ul>
129 </div>
130 </div><!--MenuBox-->
131
132
133
134 <div class="MenuBox2" id="Menu_1">
135 <div class="titBox"><h3><a href="javascript:showMenu(1);">客户</a></h3></div>
136 <div class="txtBox">
137 <ul>
138 <li><a href="#">杨董</a></li>
139 <li><a href="#">小蓟里</a></li>
140 <li><a href="#">小林</a></li>
141 <li><a href="#">小龙</a></li>
142 <li class="Lst"><a href="#">欧阳少佐</a></li>
143 </ul>
144 </div>
145 </div><!--MenuBox-->
146
147
148
149
150
151 <div class="MenuBox2" id="Menu_2">
152 <div class="titBox"><h3><a href="javascript:showMenu(2);">朋友</a></h3></div>
153 <div class="txtBox">
154 <ul>
155 <li><a href="#">死党</a></li>
156 <li><a href="#">要钱的</a></li>
157 <li><a href="#">欠我钱的</a></li>
158 <li><a href="#">好色的</a></li>
159 <li class="Lst"><a href="#">漂亮的</a></li>
160 </ul>
161 </div>
162 </div><!--MenuBox-->
163
164
165
166
167 <div class="MenuBox2" id="Menu_3">
168 <div class="titBox"><h3><a href="javascript:showMenu(3);">家人</a></h3></div>
169 <div class="txtBox">
170 <ul>
171 <li><a href="#">Dodo</a></li>
172 <li><a href="#">Tom</a></li>
173 <li><a href="#">小林</a></li>
174 <li><a href="#">小龙</a></li>
175 <li class="Lst"><a href="#">华美</a></li>
176 </ul>
177 </div>
178 </div><!--MenuBox-->
179
180
181 <div class="MenuBox2">
182 <div class="titBox"><h3 class="Lst"><a href="#">展示完毕，谢谢各位</a></h3></div>
183 </div><!--MenuBox-->
184 </div>
185 </body>
186 </html>
187
188 以上就是我分享简单的树形目录QQ列表的展示，如有不足的地方，还请各位博友斧正！谢谢大家！
