materialcoder
diff --git a/‎7 实现树形组件/css/style.css
+38 b/‎7 实现树形组件/css/style.css
+38
diff --git a/‎7 实现树形组件/img/close.png
1.14 KB b/‎7 实现树形组件/img/close.png
1.14 KB
diff --git a/‎7 实现树形组件/img/del.png
1.15 KB b/‎7 实现树形组件/img/del.png
1.15 KB
diff --git a/‎7 实现树形组件/img/nomore.png
1.03 KB b/‎7 实现树形组件/img/nomore.png
1.03 KB
diff --git a/‎7 实现树形组件/img/span.png
1.12 KB b/‎7 实现树形组件/img/span.png
1.12 KB
diff --git a/‎7 实现树形组件/index.html
+15 b/‎7 实现树形组件/index.html
+15
diff --git a/‎7 实现树形组件/js/data.js
+27 b/‎7 实现树形组件/js/data.js
+27
diff --git a/‎7 实现树形组件/js/script.js
+85 b/‎7 实现树形组件/js/script.js
+85
@@ -0,0 +1,38 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+body {
+	font-family: "Microsoft Yahei";
+}
+ul {
+	list-style: none;
+}
+.menu {
+	width: 170px;
+	padding: 20px 0;
+	margin-left: 200px;
+}
+.node ul {
+	margin-left: 20px;
+}
+.node .tree {
+	width: 100px;
+	height: 30px;
+	line-height: 30px;
+	padding-left: 22px;
+	font-size: 16px;
+	cursor: pointer;
+}
+.node .span {
+	background: url(../img/span.png) no-repeat left center;
+}
+.node .close {
+	background: url(../img/close.png) no-repeat left center;
+}
+.node .nomore {
+	background: url(../img/nomore.png) no-repeat left center;
+}
+.node .node {
+	display: none;
+}
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>实现树形组件</title>
+	<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<div class="menu" id="menu">
+		
+	</div>
+	<script src="js/data.js"></script>
+	<script src="js/script.js"></script>
+</body>
+</html>
@@ -0,0 +1,27 @@
+var nodes =[{
+				name: "父节点1", 
+				children: [{
+							name: "子节点11"
+							},
+							{
+							name: "子节点12"
+							},
+							{name: "子节点13",
+							 children:[{name:"叶子节点131"}]
+							}]
+			}, 
+			{
+				name: "父节点2",
+				children: [{name: "子节点21"},
+						   {name: "子节点22", 
+						    children:[{name:"叶子节点221"},
+						    		  {name:"叶子节点222",children:[{name:"叶子节点2221"}]}]
+						  }]
+			},
+			{
+				name: "父节点3",
+				children: [{name: "子节点31"},
+						   {name: "子节点32", 
+						    children:[{name:"叶子节点321"}]
+						  }]
+			}];
@@ -0,0 +1,85 @@
+// 获取菜单
+var menu = document.getElementById("menu");
+
+// 读取数据，构建页面
+findChild(nodes,menu);
+
+// 获取menu下的所有的tree
+var divs = menu.getElementsByTagName('div');
+
+// 点击时显示和隐藏
+for(var i=0;i<divs.length;i++){
+	divs[i].id = i; //设置tree的id，便于onclick时获取对应的tree
+
+	// 获取没有children的分支
+	var file = document.getElementById(i);
+	if(file.nextSibling == null){
+		file.style.color = "#999";
+		file.className = "tree nomore";
+	}
+
+	divs[i].onclick = function() {
+		var tree = document.getElementById(this.id), //获取点击的tree
+			node = tree.nextSibling; //获取tree的主分支
+
+		// 如果tree上存在分支，即children，则点击时展开和收起
+		if(node!=null){
+			var uls = node.getElementsByTagName('ul'); //获取该tree下的主分支的所有小分支
+
+			// 如果是展开的，点击时收起，否则点击时展开
+			if(node.style.display == "block") {
+				node.style.display = "none";
+				tree.className = "tree close";
+				// 将主分支上的所有小分支也收起
+				for(var j=0;j<uls.length;j++) {
+					uls[j].style.display = "none";
+				}
+			} else {
+				node.style.display = "block";
+				tree.className = "tree span";
+			}
+		}
+	}
+}
+
+// 读取数据函数
+/*
+ * nodes Array 数据
+ * parentnode 要插入树形结构的父元素节点
+ */
+function findChild(nodes,parentnode) {
+	var node = document.createElement("ul");
+	node.className = "node";
+	parentnode.appendChild(node);
+
+	for(var i=0;i<nodes.length;i++) {
+		var li = document.createElement("li");
+		var ul = parentnode.getElementsByTagName('ul')[0];  //获取node
+		var tree = document.createElement("div"); //创建tree
+		ul.appendChild(li);
+		tree.className = "tree close";
+		tree.innerHTML = nodes[i].name;
+
+		var lis = childNode(ul)[i]; //获取ul下的li，作为children的父节点
+		lis.appendChild(tree); //插入children
+
+		//如果存在子节点，则遍历子节点信息
+		if(nodes[i].children){
+			findChild(nodes[i].children, lis);
+		}
+	}
+}
+
+
+// 查找指定父节点下的所有子节点
+// pNode 父节点
+function childNode(pNode) {
+	var cNode = [];
+	var childNode = pNode.childNodes;
+	for(var i=0;i<childNode.length;i++) {
+		if(childNode[i].nodeType == 1) {
+			cNode.push(childNode[i]);
+		}
+	}
+	return cNode;
+}