html页面怎么以树状图样式显示出文件夹及其下的子文件夹

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

可以通过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>

Webtree懒加载是一种技术，它可以让你在编辑时只加载必要的内容，而不是一次性加载所有内容。这样可以大大提高编辑时的性能，特别是当你正在处理大量数据的时候。比如，当你编辑一个网站的页面时，你可以只加载当前页面上的内容，而不是加载整个网站的内容。这样可以大大提升编辑时的性能。

---