效果展示:
声明:文字前为图片,引入即可
<!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>