如何用HTML做树状的目录

可以通过jQuery的treeview插件实现，基本实现代码如下：

<link rel="stylesheet" href="../jquery.treeview.css" type="text/css" />

<script src="../js/jquery.js"></script>

<script type="text/javascript" src="../js/jquery.treeview.js"></script>

<script src="../js/jquery.cookie.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#red").treeview({

animated: "fast",

collapsed: true,

unique: true,

toggle: function() {

window.console &&console.log("%o was toggled", this)

}

})

})

</script>

html如下：

<ul id="red">

<li class="open"><span>北京市</span>

<ul>

<li class="open"><span>西城区</span>

<ul>

<li class="open"><span>西直门</span>

<ul>

<li><span>西环广场</span></li>

</ul>

</li>

<li><span>马甸</span>

<ul>

<li><span>浙江大厦</span></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

A

解释：

使用img 标签

具体参数

<img src='图片文件路径 名称' width='图片宽度' height='图片高度' border='0 or 1 是否显示边框'>

其他的参数不常用。

可以搜索一下。

用z-tree插件

①带有父子关系的标准

zTreeNodes

举例:

Js代码

1.var zTreeNodes = [

2.{"id":1, "name":"test1", "nodes":[

3.{"id":11, "name":"test11", "nodes":[

4.{"id":111, "name":"test111"}

5."id":12, "name":"test12"}

②带有父子关系的简单

Array

格式

(isSimpleData)的zTreeNodes

举例：

Js代码

1.var treeNodes = [

2. {"id":1, "pId":0, "name":"test1"},

3.{"id":11, "pId":1, "name":"test11"},

4. {"id":12, "pId":1, "name":"test12"},

5. {"id":111, "pId":11, "name":"test111"},

例子：

(Java代码)

①在页面引用

zTree的js和css：

Html代码

1.

<!-- ZTree树形插件 -->

2.<link

rel="stylesheet"

href="<%=root%>/Web/common/css/zTreeStyle/zTreeStyle.css"type

="text/css">

3.<!-- <link rel="stylesheet" href="<%=root%>/Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> -->

4.<script ype="text/javascript"src="<%=root%>/Web/common/js/jquery-ztree-2.5.min.js"

></script>

---