如何创建html的树形结构

html-css011

如何创建html的树形结构,第1张

我的百度空间有篇文章,是写生成树菜单的。

http://hi.baidu.com/2hill/blog/item/f22f4ed827b8e23733fa1cca.html

代码我都已经写好了,你复制就行了,当然,也有一些解释,应该可以看懂的。

我是用Js读取XML实现的

到我的空间逛逛吧,有更多收获,http://www.yuefan.net

用以下代码结构 模拟树形:

<ul>

<li>

<ul>

<li></li>

<li></li>

</ul>

</li>

<li></li>

</ul>

下面是最基本的框架,内容和样式你需要自己调整

<!DOCTYPE html>

<html>

<head>

<meta charset="gb2312" />

<title></title>

<style type="text/css">

#tree {

width: 150px

}

#tree, #tree ul {

list-style: nonemargin: 0padding: 0padding: 10px

}

#tree li {

border: 1px solid #00fpadding: 10pxcursor: pointer

}

#tree ul {

display: none

}

</style>

<script type="text/javascript">

window.onload = function() {

var tree = document.getElementById("tree")

var lis = tree.getElementsByTagName("li")

for(var i = 0i <lis.lengthi++) {

(function(a) {

lis[a].onclick = function() {

if(typeof this.getElementsByTagName("ul") !== null) {

var ul_first = this.getElementsByTagName("ul")[0]

if(ul_first.style.display == "block")

ul_first.style.display = "none"

else

ul_first.style.display = "block"

}

}

})(i)

}

}

</script>

</head>

<body>

<ul id="tree">

<li>菜单一

<ul>

<li>1-1</li><li>1-2</li><li>1-3</li><li>1-4</li>

</ul>

</li>

<li>菜单二

<ul>

<li>2-1</li><li>2-2</li><li>2-3</li><li>2-4</li>

</ul>

</li>

<li>菜单三

<ul>

<li>3-1</li><li>3-2</li><li>3-3</li><li>3-4</li>

</ul>

</li>

</ul>

</body>

</html>