容易的树形菜单 _Web前端

简单的树形菜单
平时大家都会看见许多Web系统中有树形菜单的功能。我就举一个非常简单的树形菜单例子

<html>
	<head>
		<title>菜单</title>
		<style type="text/css">
			body {
				font-family: arial, 宋体, serif;
				font-size:12px;
			}
			#nav {
				list-style-type: none;
				text-align: float;
			}
			#nav li ul {
				list-style-type: none;
				text-align: float;
			}
			.collapsed {
				display: none;
			}
			.expanded {
				display: "";
			}
		</style>
		<script language="javascript">
			function doMenu(menuid) {
				var obj = document.getElementById(menuid);
				obj.className = (obj.className == "collapsed" ? "expanded" : "collapsed");
			}
		</script>
	</head>
	<body>
		<div id="menu">
			<ul id="nav">
				<li><a href="#" onclick="doMenu('childmenu1')">我的电脑</a>
					<ul id="childmenu1" class="collapsed">
						<li>视频</li>
						<li>电子文档</li>
						<li>教材</li>
					</ul>
				</li>
				<li><a href="#" onclick="doMenu('childmenu2')">其他</a>
					<ul id="childmenu2" class="collapsed">
						<li>练习</li>
						<li>案例</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

代码在附件中