二级树型菜单
<!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"
xml:lang="UTF-8" lang="UTF-8">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<meta http-equiv="Content-Language" content="UTF-8"
/>
<title>二级树型菜单 - Tree Menu - Flywe の
Blog</title>
<style type="text/css">
body
{margin:0;text-align:center;color:#000;font:normal 12px
Arial,Verdana,Tahoma;}
a:link,a:visited {color:#385065;text-decoration:none}
a:hover
{text-decoration:underline}
#menu
{width:150px;margin:0
15px;padding:0px;text-align:left;list-style:none}
#menu .item
{margin:0;list-style:none;height:16px;}
a.title:link, a.title:visited, a.title:hover
{display:block;background:url(closed.gif)
no-repeat;font-weight:bold;width:16px;height:16px;cursor:pointer;text-decoration:none;float:
left;}
.tit
{margin-top: 2px;float: left;}
#menu .item
ul {
border:1px solid #9FACB7;
margin:0;
width:80px;
padding:0 0 0 15px;
list-style:none;
display:none;
background-color: #CCCCCC;
}
#menu .item
ul li {display:block;}
</style>
<script language="javascript"
type="text/javascript">
// ---
获取ClassName
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var j = 0; j < elem.length; j++) {
var classes = elem[j].className;
if (myclass.test(classes)) retnode.push(elem[j]);
}
return retnode;
}
// ---
隐藏所有
function
HideAll() {
var items = document.getElementsByClassName("optiton");
for (var j=0; j<items.length; j++) {
items[j].style.display = "none";
}
var items = document.getElementsByClassName("title");
for (var j=0; j<items.length; j++) {
items[j].style.background = "url(closed.gif)";
}
}
window.onload = function() {
var show_item = "opt_m1";
document.getElementById(show_item).style.display = "none";
var items = document.getElementsByClassName("title");
for (var j=0; j<items.length; j++) {
items[j].onclick = function() {
var o = document.getElementById("opt_" + this.id);
var v = document.getElementById(this.id);
if (o.style.display != "block") {
HideAll();
o.style.display = "block";
v.style.background = "url(opened.gif)";
}
else {
o.style.display = "none";
v.style.background = "url(closed.gif)";
}
}
}
}
</script>
</head>
<body>
<ul id="menu">
<li class="item"><a
href="javascript:void(0)" class="title"
id="m1"></a><a
href="#"
class="tit">基本信息</a>
<ul id="opt_m1"
class="optiton">
<li><a
href="#">企业简介</a></li>
<li><a
href="#">企业新闻</a></li>
</ul>
</li>
<li class="item"><a
href="javascript:void(0)" class="title"
id="m2"></a><a
href="#"
class="tit">系统管理</a>
<ul id="opt_m2"
class="optiton">
<li><a
href="#">企业简介</a></li>
<li><a
href="#">企业新闻</a></li>
</ul>
</li>
<li class="item"><a
href="javascript:void(0)" class="title"
id="m3"></a><a
href="#"
class="tit">系统信息</a>
<ul id="opt_m3"
class="optiton">
<li><a
href="#">会员管理</a></li>
<li><a
href="#">管理员设置</a></li>
<li><a
href="#">权限组设置</a></li>
<li><a
href="#">退出系统</a></li>
</ul>
</li>
</ul>
</body>
</html>
