效果展示:
声明:文字前为图片,引入即可
<!DOCTYPE html><html><head><meta charset="utf-8"><title>树形菜单</title></head><style>.box{width: 180px;border: 1px solid red;padding-left: 10px;}a{font-size: 15px;color:aqua;text-decoration:none;}a:hover{font-size: 17px;color: #999999;}</style><body><div class="box"><div><a href="javascript:onClick=show('1')"><img src="image/z-1.jpg"/>分类讨论区</a></div><div id="1"><img src="image/z-top.gif" /> BBS系统<br><img src="image/z-top.gif">共建水木<br><img src="image/z-top.gif">站务公告栏<br><img src="image/z-top.gif">妆点水木<br><img src="image/z-end.gif">申请版主<br></div><div><a href="javascript:onClick=show('2')"><img src="image/z-2.jpg" >社会信息</a></div><div id="2"><img src="image/z-top.gif">美容品与饰品代理<br><img src="image/z-top.gif">考研资料市场<br><img src="image/z-top.gif">商海纵横<br><img src="image/z-top.gif">动物保护者<br><img src="image/z-top.gif">动物世界<br><img src="image/z-end.gif">中国风·神州各地<br></div><div><a href="javascript:onClick=show('3')"><img src="image/z-3.jpg">休闲娱乐</a></div><div id="3"><img src="image/z-top.gif">ASCIIart全国转信<br><img src="image/z-top.gif">七彩水木<br><img src="image/z-top.gif">网友聚会<br><img src="image/z-top.gif">醉品人生<br><img src="image/z-top.gif">花木园艺<br><img src="image/z-end.gif">祝福<br></div><div><a href="javascript:onClick=show('4')"><img src="image/z-4.jpg">电脑技术</a></div><div id="4"><img src="image/z-top.gif">BBS安装管理<br><img src="image/z-top.gif">CAD技术<br><img src="image/z-top.gif">数字图像设计<br><img src="image/z-top.gif">电脑音乐制作<br><img src="image/z-top.gif">软件加密与解密<br><img src="image/z-end.gif">计算机体系结构<br></div></div><script>function show(d1){if (document.getElementById(d1).style.display == 'none') {document.getElementById(d1).style.display = 'block'; //触动的层如果处于隐藏状态，即显示} else {document.getElementById(d1).style.display = 'none'; //触动的层如果处于显示状态，即隐藏}}</script></body></html>
