用JS写一个网站树形菜单
先上效果图：
主体内容就是侧边展示的一二三级菜单，树形结构的。
前端页面布局内容，页面内容简单用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>
这样就完成树形菜单的编辑了。
