菜单的显示于隐藏

<!DOCTYPE html>
<html>
<head>
	<title>菜单的制作</title>
	<meta charset="utf-8">
	<style type="text/css">
		.bt {}
		.bt span { display: block; }
	</style>
</head>
<body>
<!-- 制作方法一: -->
	<div>
		<ul>
			<li><a href="#" name="menu1" onclick="javascript:addMenu();">bt1</a></li>
			<li id="menulist1" style="display: none;">
				<a href="#">bt2</a>
				<a href="#">bt2</a>
				<a href="#">bt2</a>
				<a href="#">bt2</a>
			</li>
		</ul>
	</div>
<!-- 制作方法二 -->
	<div class="bt">
		<span>
			<a href="#" onclick="javascript:addMenu2();">bt2</a>
		</span>
		<div id="menu1" style="display:none;">
			<span><a href="javascript:void(0);">btbt1</a></span>
			<span><a href="javascript:void(0);">btbt1</a></span>
			<span><a href="javascript:void(0);">btbt1</a></span>
			<span><a href="javascript:void(0);">btbt1</a></span>
		</dav>
	</div>
</body>
<script type="text/javascript">
	function addMenu() {
		document.getElementById("menulist1").style.display = "block";
	}
	function addMenu2() {
		document.getElementById("menu1").style.display = "block";
	}
</script>
</html>

猜你喜欢

转载自blog.csdn.net/footprint01/article/details/82800680