先看下效果

?

下面就是JS代码

function clickHandler()
{
	//定义需要操作的XHTML元素id
	var targetId;
	//定义需要被操作的XHTML元素
	var targetElement;
	//定触发事件的事件源（其中event是隐式可用的全局对象）
	var srcElement = event.srcElement;
	//根据其className属性值判断它不是叶子节点，即该节点可以展开
	if (srcElement.className.substr(0,7) == "outline")
	{
		//如果事件源是树节点前的图片
		if (srcElement.id.indexOf("Image") > 0)
		{
			//获取该节点对应<div.../>元素的id
			targetId = srcElement.id.substring(0
				, srcElement.id.length - 5)	+ "Details";
		}
		//如果事件源是树节点所在的<div.../>元素
		else
		{
			//获取该节点对应<div.../>元素的id
			targetId = srcElement.id + "Details";
		}
		//找到对应的<div.../>元素
		targetElement = document.getElementById(targetId);
		//如果targetElement对象存在
		if (targetElement)
		{
			//如果该<div.../>元素处于“隐藏”状态
			if (targetElement.style.display == "none")
			{
				//显示该<div.../>元素
				targetElement.style.display = "";
			}
			else
			{
				//否则，隐藏该<div.../>元素
				targetElement.style.display = "none";
			}
		}
		//如果事件源是树节点前的图片
		if (srcElement.id.indexOf("Image") > 0)
		{
			
			//获取该节点前的<img.../>元素的id
			targetId = srcElement.id;
		}
		//如果事件源是树节点所在的<div.../>元素
		else
		{
			//获取该节点前的<img.../>元素的id
			targetId = srcElement.id + "Image";
		}
		//找到对应的<img.../>元素
		targetElement = document.getElementById(targetId);
		//如果该<img.../>元素中显示的图片是“加号”图片
		if (targetElement.src.indexOf("plus") >= 0)
		{
			//将<img.../>的“加号”图片换为“减号”图片
			targetElement.src = "image/minus.gif";
		}
		else
		{
			//否则，将<img.../>的“减号”图片换为“加号”图片
			targetElement.src = "image/plus.gif";
		}
	}
}
//为页面文档的onclick事件绑定事件处理函数
document.onclick = clickHandler;

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>JavaScript树</title>
		<meta name="author" content="Yeeku.H.Lee" />
		<meta name="website" content="http://www.crazyit.org" />
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<style type="text/css">
/* 控制根节点的CSS样式定义 */
.outline {
	font-size: 9pt;
	margin-left: 15pt;
	text-indent: -28pt;
	cursor: hand;
	text-decoration: none
}

/* 控制第一级子节点的CSS样式定义 */
.outline1 {
	font-size: 9pt;
	margin-left: 24pt;
	text-indent: -36pt;
	cursor: hand;
	text-decoration: none
}

/* 控制第二级子节点的CSS样式定义 */
.outline11 {
	font-size: 9pt;
	margin-left: 38pt;
	text-indent: -50pt;
	cursor: hand;
	text-decoration: none
}

/* 控制根节点下叶子节点的CSS样式定义 */
.passage0 {
	font-size: 9pt;
	margin-left: 15pt;
	text-indent: -28pt;
	text-decoration: none
}

/* 控制第一级节点下叶子节点的CSS样式定义 */
.passage1 {
	font-size: 9pt;
	margin-left: 24pt;
	text-indent: -36pt;
	text-decoration: none
}

/* 控制第二级节点下叶子节点的CSS样式定义 */
.passage11 {
	font-size: 9pt;
	margin-left: 38pt;
	text-indent: -50pt;
	text-decoration: none
}
</style>
		<script type="text/javascript" src="tree.js">
	
</script>
	</head>
	<body>
		<div id="root" class="outline">
			<img id="rootImage" class="outline" alt="rootImage"
				src="image/plus.gif" />
			我的电脑
		</div>
		<div id="rootDetails" style="display: none">
			<div id="child1" class="outline1">
				<img id="child1Image" class="outline1" alt="child1Image"
					src="image/plus.gif" />
				本地磁盘 C:
			</div>
			<div id="child1Details" style="display: none">
				<div class="passage11">
					<img class="passage11" src="image/passage.gif" />
					文件一
				</div>
				<div class="passage11">
					<img class="passage11" src="image/passage.gif" />
					文件二
				</div>
			</div>
			<div id="child2" class="outline1">
				<img id

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JS写的一个简略的JavaScript树

先看下效果

?

html代码

相关资料更多>

推荐阅读更多>

JS写的一个简略的JavaScript树

先看下效果?

html代码

相关资料更多>

推荐阅读更多>

先看下效果

?