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>