Javascript (JS) TreeView 收缩展开

最新推荐文章于 2022-09-23 22:00:41 发布

转载最新推荐文章于 2022-09-23 22:00:41 发布 · 1.7k 阅读

文章标签：

#js #javascript #treeview #menu #html

开发、脚本语言等专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用JavaScript和HTML实现的简单树状菜单系统。点击父节点时，子节点将显示或隐藏，实现了菜单项的动态展开与收起效果。此方案适用于创建可折叠的导航菜单。

JS方法

<script type="text/javascript">
	function nodeClick(o){
		var obj, disp, level, nsb
		obj = event.srcElement;
		if (obj != o){
			if(obj.nextSibling != null){
				if (obj.nextSibling){
					disp = obj.nextSibling.style.display != "none" ? "none" : "block";
					level = parseInt(obj.name.substring(1));
					while (obj.nextSibling && parseInt((obj.nextSibling.name == null ? -1 : obj.nextSibling.name.substring(1))) > level) {
						obj = obj.nextSibling;
						obj.style.display = disp;
					}
				}
			}
		}
	}
</script>

Html代码

<div id="tree" style="width:300px;height:450px;border:1px outset #EEEEEE;padding-top:2px;overflow-x:hidden;overflow-y:scroll;display:inline" onmouseover="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='#f3f6ff';" onmouseout="javascript:var obj=event.srcElement;if(obj!=this)obj.style.backgroundColor='';" onclick="javascript:nodeClick(this)">
	<div name="l1">
		请选择部门
	</div>
	<div name="l2">
		　申银万国
	</div>
	<div name="l3">
		　　经纪管理总部
	</div>
	<div name="l4">
		　　　上海余姚国债
	</div>
	<div name="l4">
		　　　上海新昌路证券营业部
	</div>
	<div name="l4">
		　　　上海莘庄证券营业部
	</div>
	<div name="l4">
		　　　上海中华路证券营业部
	</div>
	<div name="l4">
		　　　上海瞿溪路营业部
	</div>
	<div name="l4">
		　　　上海东体育会路营业部
	</div>
	<div name="l4">
		　　　上海奉贤证券营业部
	</div>
	<div name="l4">
		　　　上海福州路证券营业部
	</div>
	<div name="l4">
		　　　上海余姚路证券营业部
	</div>
	<div name="l4">
		　　　上海虹古路证券营业部
	</div>
	<div name="l4">
		　　　上海龙茗路证券营业部
	</div>
	<div name="l4">
		　　　上海金山证券营业部
	</div>
	<div name="l4">
		　　　上海洛川东路营业部
	</div>
	<div name="l3">
		　　银证通部门
	</div>
	<div name="l4">
		　　　银证通结算机构
	</div>
	<div name="l3">
		　　经纪管理总部
	</div>
</div>