html制作二级树形菜单的方法

发布时间:2020-07-11编辑:脚本学堂
二级树形菜单折叠展开/合拢在网页中比较常见,html如何实现的呢?本文通过实例给大家介绍下,需要制作树形菜单的同学要好好看看。

Html代码
 

复制代码 代码示例:
1.<body>
2.<ul id="nav">
3.    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的资料</a>
4.         <ul id="ChildMenu1" class="collapsed">
5.             <li><a href="#">first</a></li>
6.             <li><a href="#">second</a></li>
7.             <li><a href="#">third</a></li>
8.             <li><a href="#">forth</a></li>
9.             <li><a href="#">fifth</a></li>
10.         </ul>
11.    </li>
12.    <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的相册</a>
13.         <ul id="ChildMenu2" class="collapsed">
14.             <li><a href="#">first</a></li>
15.             <li><a href="#">second</a></li>
16.             <li><a href="#">third</a></li>
17.             <li><a href="#">forth</a></li>
18.             <li><a href="#">fifth</a></li>
19.         </ul>
20.    </li>
21.    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">我的通讯录</a>
22.         <ul id="ChildMenu3" class="collapsed">
23.             <li><a href="#">first</a></li>
24.             <li><a href="#">second</a></li>
25.             <li><a href="#">third</a></li>
26.             <li><a href="#">forth</a></li>
27.             <li><a href="#">fifth</a></li>
28.         </ul>
29.    </li>
30.    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">我的WIKI</a>
31.         <ul id="ChildMenu4" class="collapsed">
32.             <li><a href="#">first</a></li>
33.             <li><a href="#">second</a></li>
34.             <li><a href="#">third</a></li>
35.             <li><a href="#">forth</a></li>
36.             <li><a href="#">fifth</a></li>
37.         </ul>
38.    </li>
39.
40.
41.<li><a href="#Menu=ChildMenu5" onclick="DoMenu('ChildMenu5')">我的卡卡淘</a>
42.         <ul id="ChildMenu5" class="collapsed">
43.             <li><a href="#">first</a></li>
44.             <li><a href="#">second</a></li>
45.             <li><a href="#">third</a></li>
46.             <li><a href="#">forth</a></li>
47.             <li><a href="#">fifth</a></li>
48.         </ul>
49.    </li>
50.
51.
52.
53.<li><a href="#Menu=ChildMenu6" onclick="DoMenu('ChildMenu6')">我的分享</a>
54.         <ul id="ChildMenu6" class="collapsed">
55.             <li><a href="#">first</a></li>
56.             <li><a href="#">second</a></li>
57.             <li><a href="#">third</a></li>
58.             <li><a href="#">forth</a></li>
59.             <li><a href="#">fifth</a></li>
60.         </ul>
61.    </li>
62.</ul>
63.</body>