如何用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>

看看这个你就知道该如何选择了，如果说树形结构，大家肯定都能比较好理解，首页就是树干、栏目页就是树枝、内容页就像树叶一样了，但是树形结构虽然有利于扩展、结构清晰等优势，但是其对于搜索引擎友好程度，不如扁平化结构，值得一说的是，本站采用的就是扁平化结构，所以我就以一个过来人身份，和大家分享一下，我对于扁平化结构一些看法。什么是扁平化结构我不太喜欢说一些理论没营养的话，用白话说，扁平化结构就是减少管理层次，提高管理效果，应用到搜索引擎优化中来，就是首页和内容页之间的垂直访问，不需要有间隔层次，我用个例子详细说明下：树形化结构：首页

>

栏目页

>

内容页扁平化结构：首页

>

内容页上面是说的url层次，不是当前位置，别弄混了就行。那么使用扁平化结构，有什么好处？提高搜索引擎抓取效率如果是网站层次很深，会对搜索引擎蜘蛛抓取造成很大负担，所以蜘蛛们一般喜欢抓取浅层内容，而扁平化结构凸出特点就是，有效减少了网站层次，达到了提高蜘蛛抓取效率。有助于首页权重凝固一个网站可能有无数页面，但是首页肯定只有一个，一般在搜索引擎优化中，首页是承担核心关键词重担，所以当你采用扁平化结构后，因为内容页和首页之间是垂直管理，联系更加的紧密，当你内容页优化不错时候，会对首页核心关键词有着积极帮助。希望我的回答能帮到你。龙术seo

只是静态展示效果的话，HTML里的ul标签搭配一些CSS代码就能实现，如果想实现动态交互，例如点击展开、折叠文件夹的话，需要使用JS，当然，有专门的插件可以实现，例如：zTree，官网：http://www.treejs.cn

---