JavaScript实现简单的树形菜单效果
斯丢皮德曼 人气:0简单的一个树形菜单，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形菜单</title>
<style>
body {
font: 12px/20px 宋体;
}
img {
vertical-align: center;
border: none;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none;
}
</style>
<script>
function onclickfclose(id) {
var ul = document.getElementById(id);
var objv = ul.style.display;
if (objv == 'none') {
ul.style.display = 'block'
} else {
ul.style.display = 'none';
}
}
</script>
</head>
<body>
<b><img src="images/fold.gif" alt="">树形菜单</b>
<ul>
<a href="javascript:onclickfclose('art')"><img src="images/fclose.gif" alt="">文学艺术</a>
</ul>
<ul id="art" style="display: none;">
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">著名小说</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">著名小说</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">著名小说</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">著名小说</li>
</ul>
<ul>
<a href="javascript:onclickfclose('fangc')"><img src="images/fclose.gif" alt="">房产论坛</a>
</ul>
<ul id="fangc" style="display: none;>
<li><img src=" imageshttps://img.qb5200.com/download-x/doc.gif" alt="">房产推销</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">房产推销</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">房产推销</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">房产推销</li>
</ul>
<ul>
<a href="javascript:onclickfclose('tuhua')"><img src="images/fclose.gif" alt="">提图专区</a>
</ul>
<ul id="tuhua" style="display: none;>
<li><img src=" images
https://img.qb5200.com/download-x/doc.gif" alt="">风景图画</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">风景图画</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">风景图画</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">风景图画</li>
</ul>
<ul>
<a href="javascript:onclickfclose('bagua')"><img src="images/fclose.gif" alt="">娱乐八卦</a>
</ul>
<ul id="bagua" style="display: none;>
<li><img src=" images
https://img.qb5200.com/download-x/doc.gif" alt="">明星采访</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">明星采访</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">明星采访</li>
<li><img src="imageshttps://img.qb5200.com/download-x/doc.gif" alt="">明星采访</li>
</ul>
</body>
</html>
加载全部内容