蜗牛—JavaScript学习之简易树形菜单

最新推荐文章于 2022-11-17 14:14:33 发布

原创最新推荐文章于 2022-11-17 14:14:33 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的可折叠导航菜单示例。该菜单通过简单的JavaScript控制展开与折叠，适用于网站或应用程序的侧边栏导航。文章展示了如何通过CSS样式美化菜单，并利用JavaScript函数实现子菜单的显示与隐藏。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { font:12px/18px 宋体; color:#333; background:#fff; }
ul,li { margin:0; padding:0; }
#tree { width:200px; }
ul { list-style:none; }
ul li a:link,ul li a:visited,ul li a:hover,ul li a:active { color:#000; text-decoration:none; }
ul li ul { margin-left:15px; }
ul li ul li { background:url(images/icon_tree.gif) left center no-repeat; padding-left:22px; }
ul li ul li.last { background:url(images/icon_tree_last.gif) left center no-repeat; }
.hide { display:none; }
.show { display:block; }
</style>
<script type="text/javascript">
function displayChild(obj)
{
	var ul = obj.getElementsByTagName("ul");
	var img = obj.getElementsByTagName("img");
	// ul[0]表示子项中的第一个ul标签，也就是li标签内的最外层ul标签
	// img[0]表示大标题前面的第一张图片，也就是加号或者减号的图片
	if(ul[0].className == "hide") {
		ul[0].className = "show";
		img[0].src = "images/icon_-.gif";
	} else {
		ul[0].className = "hide";
		img[0].src = "images/icon_+.gif";
	}
}
</script>
</head>

<body>
<div id="tree">
	<ul>
		<li onclick="displayChild(this)">
			<img src="images/icon_-.gif" /><img src="images/icon_list_1.gif" />
			<a href="#">分类讨论区</a>
			<ul>
				<li><a href="#">BBS 系统</a></li>
				<li><a href="#">共建水木</a></li>
				<li><a href="#">站务公告栏</a></li>
				<li><a href="#">妆点水木</a></li>
				<li><a href="#">申请版主</a></li>
			</ul>
		</li>
		<li onclick="displayChild(this)">
			<img src="images/icon_+.gif" /><img src="images/icon_list_2.gif" />
			<a href="#">社会信息</a>
			<ul class="hide">
				<li><a href="#">美容品与饰品代理</a></li>
				<li><a href="#">考研资料市场</a></li>
				<li><a href="#">商海纵横</a></li>
				<li><a href="#">动物保护者</a></li>
				<li><a href="#">动物世界</a></li>
				<li><a href="#">中国风·神州各地</a></li>
			</ul>
		</li>
		<li onclick="displayChild(this)">
			<img src="images/icon_+.gif" /><img src="images/icon_list_3.gif" />
			<a href="#">休闲娱乐</a>
			<ul class="hide">
				<li><a href="#">ASCIIArt全国转信</a></li>
				<li><a href="#">七彩水木</a></li>
				<li><a href="#">网友聚会</a></li>
				<li><a href="#">醉品人生</a></li>
				<li><a href="#">花木园艺</a></li>
				<li><a href="#">祝福</a></li>
			</ul>
		</li>
		<li onclick="displayChild(this)">
			<img src="images/icon_+.gif" /><img src="images/icon_list_4.gif" />
			<a href="#">电脑技术</a>
			<ul class="hide">
				<li><a href="#">电脑技术</a></li>
				<li><a href="#">CAD技术</a></li>
				<li><a href="#">数字图像设计</a></li>
				<li><a href="#">电脑音乐制作</a></li>
				<li><a href="#">软件加密与解密</a></li>
				<li class="last"><a href="#">计算机体系结构</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>