<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js最简单的树菜单</title>
<style type="text/css">
ul{ list-style:none; display:none;}
</style>
<script type="text/javascript">
window.onload = initAll;
function initAll(){
//获取所有连接标签，并在点击时触发函数
var allLinks = document.getElementsByTagName("a");
for(var i=0;i<allLinks.length;i++){
allLinks[i].onclick = toggleMenu;
}
}
function toggleMenu(){
//获取类名相同的id，并设置其可见和不可见
var thisMenuName = this.className;
var thisMenu = document.getElementById(thisMenuName).style;
thisMenu.display=(thisMenu.display == "block") ? "none" : "block";
}
</script>
</head>
<body>
<h1>树菜单</h1>
<div> <a href="#" class="menu0">标题1</a>
<ul id="menu0">
<li><a href="#">内容1</a></li>
<li><a href="#">内容1</a></li>
<li><a href="#">内容1</a></li>
<li><a href="#">内容1</a></li>
</ul>
</div>
<div> <a href="#" class="menu1">标题2</a>
<ul id="menu1">
<li><a href="#">内容2</a></li>
<li><a href="#">内容2</a></li>
<li><a href="#">内容2</a></li>
</ul>
</div>
</body>
</html>
扫一扫
08-17
2272
2272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
