这是一个简单、轻量级的，基于jQuery的目录树。纯html代码。

<html><head></head><scripttype="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script><script>$(document).ready(function(){$('.treeli').each(function(){if($(this).children('ul').length>0){$(this).addClass('parent');}});$('.treeli.parent>a').click(function(){$(this).parent().toggleClass('active');$(this).parent().children('ul').slideToggle('fast');});$('#all').click(function(){$('.treeli').each(function(){$(this).toggleClass('active');$(this).children('ul').slideToggle('fast');});});});</script><style>body,a{color:#3B4C56;font-family:sans-serif;font-size:14px;text-decoration:none;}#pgtitle{margin:0px0px20px;font-size:18pt;text-align:center;}a{cursor:pointer;}.treeul{list-style:noneoutsidenone;}.treelia{line-height:25px;}.tree>ul>li>a{color:#3B4C56;display:block;font-weight:normal;position:relative;text-decoration:none;}.treeli.parent>a{padding:00028px;}.treeli.parent>a:before{background-position:25pxcenter;content:"|";display:block;height:21px;left:0;position:absolute;top:2px;vertical-align:middle;width:23px;}.treeulli.active>a:before{background-position:0center;}.treeulliul{border-left:1pxsolid#D9DADB;display:none;margin:00012px;overflow:hidden;padding:00025px;}.treeulliulli{position:relative;}.treeulliulli:before{border-bottom:1pxdashed#E2E2E3;content:"";left:-20px;position:absolute;top:12px;width:15px;}#wrapper{margin:0auto;width:300px;}</style><body><divid="wrapper"><divclass="tree"><buttonid="all">ToggleAll</button><ul><li><a>第一级目录</a><ul><li><a>第二级目录</a></li><li><a>第二级目录</a></li><li><a>第二级目录</a></li></ul></li><li><a>第一级目录</a><ul><li><a>第二级目录</a><ul><li><a>第三级目录</a></li><li><a>第三级目录</a></li><li><a>第三级目录</a><ul><li><a>第四级目录</a></li><li><a>第四级目录</a></li><li><a>第四级目录</a><ul><li><a>第五级目录</a></li><li><a>第五级目录</a></li><li><a>第五级目录</a></li></ul></li></ul></li></ul></li><li><a>第二级目录</a></li></ul></li><li><a>第一级目录</a><ul><li><a>第二级目录</a></li><li><a>第二级目录</a></li></ul></li></ul></div></div></body></html>