先上效果图：
主体内容就是侧边展示的一二三级菜单，树形结构的。
前端页面布局内容，页面内容简单用ul li 来完成所有的罗列项。用先后顺序来区分一级二级三级：
<body><b><img src="images/fold.gif">树形菜单：</b> <ul><a href="javascript:onclick=show('art') "><img src="images/fclose.gif">文学艺术</a></ul><ul id="art" class="no_circle" style="display: block;"><li><img src="images/doc.gif">先锋写作</li><li> <img src="images/doc.gif">小说散文</li><li><img src="images/doc.gif">诗风词韵</li></ul><ul><a href="javascript:onclick=show('photo') "><img src="images/fclose.gif">贴图专区</a></ul><ul id="photo" class="no_circle" style="display: block;"><li><img src="images/doc.gif">真我风采</li><li> <img src="images/doc.gif">视频贴图</li><li><img src="images/doc.gif">行行摄摄</li><li><img src="images/doc.gif">Flash贴图</li></ul><ul><a href="javascript:onclick=show('home') "><img src="images/fclose.gif">房产论坛</a></ul><ul id="home" class="no_circle" style="display: block;"><li><img src="images/doc.gif">我要买房</li><li> <img src="images/doc.gif">楼市话题</li><li><img src="images/doc.gif">我要卖房</li><li><img src="images/doc.gif">租房心语</li><li><img src="images/doc.gif">二手市场</li></ul><ul><a href="javascript:onclick=show('game') "><img src="images/fclose.gif">娱乐八卦</a></ul><ul id="game" class="no_circle" style="display: block;"><li><img src="images/doc.gif">红楼一梦</li><li> <img src="images/doc.gif">笑话论坛</li><li><img src="images/doc.gif">休闲生活</li><li><img src="images/doc.gif">大话春秋</li></ul></body>
CSS样式很简单，根据个人喜好设置：
<style type="text/css">body{font-size:13px;line-height:20px;}a{font-size: 13px;color: #000000;text-decoration: none;}a:hover{font-size:13px;color: #ff0000;}img {vertical-align: middle;border:0;}.no_circle{list-style:none;display:none;}
</style>
JS内容我们用原生的JS很简单就写出来了，用show方法，获取到我们点击的块级元素的ID，给它添加display的样式，用if else语句来判断状态显示：
<script type="text/javascript">function show(d1){if(document.getElementById(d1).style.display=='block'){document.getElementById(d1).style.display='none'; //触动的层如果处于显示状态，即隐藏}else{document.getElementById(d1).style.display='block'; //触动的层如果处于隐藏状态，即显示}}
</script>
这样就完成树形菜单的编辑了。
