手动实现树形结构

myTree.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Blank</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<!--引入jquery类库-->
		<script type="text/javascript" src="jquery.js"></script>

		<script type="text/javascript">
			function itemClick( itemDiv ){
				$(itemDiv).next().toggle();
			}
		</script>

		<style type="text/css">
		</style>

	</head>

	<body>

		<ul>
			<li>系统管理
				<ul>
					<li><div style="border: 1px solid red; width: 100px;" onclick="itemClick(this)">岗位管理</div>
						<ul>
							<li>岗位添加</li>
							<li>岗位删除</li>
						</ul>
					</li>				
					<li>部门管理</li>				
					<li>用户管理</li>				
				</ul>
			</li>
			<li>网上交流</li>
		</ul>
	</body>
</html>
运行效果:

手动实现树形结构_第1张图片


你可能感兴趣的:(手动实现树形结构)