<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<title>后台管理折叠导航菜单</title>
<style>
body{
margin:0;
padding:0;
text-align:center;
font:normal 12px Arial,Verdana,Tahoma;
line-height:150%;
}
a:link, a:visited{
color:#385065;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
#menu{
150px;
margin:0 15px;
padding:0;
text-align:left;
list-style:none;
}
#menu .item{
background:#ccaaee;
padding:0px;
list-style:none;
border:1px solid #eee;
}
a.title:link, a.title:visited, a.title:hover{
display:block;
color:#385065;
font-weight:bold;
padding:2px 0 0 22px;
width:128px;
line-height:23px;
cursor:pointer;
text-decoration:none;
}
#menu .item ul{
border:1px solid #9facb7;
margin:0;
width:116px;
padding:3px 0px 3px 30px;
bakground:#fff;
list-style:none;
display:none;
}
#menu .item ul li{
display:block;
}
</style>
<script type="text/javascript">
function hideAllObj(){
var items = document.getElementsByClassName("option");
for(var j=0; j<items.length; j++){
items[j].style.display = "none";
}
}
function check(){
document.getElementById("opt_1").style.display = "block";
var items = document.getElementsByClassName("title");
for(var j=0; j<items.length; j++){
items[j].onclick = function(){
var obj = document.getElementById("opt_" + this.name);
if(obj.style.display != "block"){
hideAllObj();
obj.style.display = "block";
}else{
obj.style.display = "none";
}
}
}
}
document.getElementsByClassName=function(classname){
var retnode = [];
var myclass = new RegExp('\b'+classname+'\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;
}
</script>
</head>
<body onload="check()">
<ul id="menu">
<li class="item"><a href="javascript:void(0)" class="title" name="1">用户管理</a>
<ul id="opt_1" class="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
<li class="item"><a href="javascript:void(0)" class="title" name="2">用户管理</a>
<ul id="opt_2" class="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
<li class="item"><a href="javascript:void(0)" class="title" name="3">用户管理</a>
<ul id="opt_3" class="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
<li class="item"><a href="javascript:void(0)" class="title" name="4">用户管理</a>
<ul id="opt_4" class="option">
<li><a href="#">添加用户</a></li>
<li><a href="#">管理用户</a></li>
</ul>
</li>
</ul>
</body>
</html>
