一个很简单的无限分类树
简单树形
-
国务院
-
省级办公单位
- 安徽
- 河南省
- 阜阳市
- 界首市
- 河北省
- 广东省
- 省级办公单位2
- 范冰冰2
- 范冰冰4
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 某导演
- 范冰冰2
- 范冰冰2
- 省级办公单位3
- 省级办公单位4
-
省级办公单位
-
国务院
-
省级办公单位
- 安徽
- 河南省
- 阜阳市
- 界首市
- 河北省
- 广东省
-
省级办公单位
-
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单树形</title>
<head>
<style type="text/css">
* {margin:0px; padding:0px;}
#categoryTree {margin:0px; padding:0px;}
#categoryTree ul {display:none; margin:0px;margin-left:5px; padding:0px 0px 0px 15px;}
#categoryTree span {cursor:pointer;}
</style>
<script type="text/javascript">
window.onload = function() {
var cate = document.getElementById("categoryTree");
var bBs = cate.getElementsByTagName("span");
var len = bBs.length;
if (len > 0) {
for (var i=0; i < len;i++) {
var oTag = bBs[i].parentNode.getElementsByTagName("ul")[0];
if (oTag) {
bBs[i].style.background = "#666";
bBs[i].onclick = function() {
var oTag = this.parentNode.getElementsByTagName("ul")[0];
if (!(oTag.open)) {
oTag.style.display = "block";
oTag.open = true;
} else {
oTag.style.display = "none";
oTag.open = null;
}
}
}
}
} else {
throw new Error("html struct error!");
}
}
</script>
</head>
<body>
<ul id="categoryTree">
<li>
<span>国务院</span>
<ul>
<li>
<span>省级办公单位</span>
<ul>
<li><span>安徽</span></li>
<li><span>河南省</span>
<ul>
<li><span>阜阳市</span></li>
<li><span>界首市</span></li>
</ul>
</li>
<li><span>河北省</span></li>
<li><span>广东省</span></li>
</ul>
</li>
<li><span>省级办公单位2</span>
<ul>
<li>范冰冰2</li>
<li><span>范冰冰4</span>
<ul>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
<li>某导演</li>
</ul>
</li>
<li>范冰冰2</li>
<li>范冰冰2</li>
</ul>
</li>
<li>省级办公单位3</li>
<li>省级办公单位4</li>
</ul>
<li>
<li>
<span>国务院</span>
<ul>
<li>
<span>省级办公单位</span>
<ul>
<li><span>安徽</span></li>
<li><span>河南省</span>
<ul>
<li><span>阜阳市</span></li>
<li><span>界首市</span></li>
</ul>
</li>
<li><span>河北省</span></li>
<li><span>广东省</span></li>
</ul>
</li>
</ul>
<li>
</ul>
</body>
</html>
浙公网安备 33010602011771号