<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS+CSS打造三级折叠菜单，自动收缩其它级</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;} a{ color:white;border:none;}
#menu { width:200px; margin:auto;}
#menu h1 { font-size:12px; border:gray 1px solid; margin-top:1px; background-color:gray;}
#menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#00CCFF;}
#menu ul { padding-left:0px; height:auto;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}
#menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
#menu ul a { display:block; padding:5px 0 3px 15px; text-decoration:none; overflow:hidden;background-color:white;color:black;}
#menu ul a:hover { color:Black;background:red; }
#menu a:hover{ color:white; background:red;} #menu .no {display:none;}
</style>
<script language="JavaScript">
function ShowMenu(obj, n) {
var Nav = obj.parentNode;
if (!Nav.id) {
var BName = Nav.getElementsByTagName("ul");
var HName = Nav.getElementsByTagName("h2");
var t = 2;
} else {
var BName = document.getElementById(Nav.id).getElementsByTagName("span");
var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
var t = 1;
}
for (var i = 0; i < HName.length; i++) {
HName[i].innerHTML = HName[i].innerHTML.replace("-", "+");
HName[i].className = "";
}
obj.className = "h" + t;
for (var i = 0; i < BName.length; i++)
{ if (i != n) { BName[i].className = "no"; } }
if (BName[n].className == "no") {
BName[n].className = "";
obj.innerHTML = obj.innerHTML.replace("+", "-");
} else {
BName[n].className = "no";
obj.className = "";
obj.innerHTML = obj.innerHTML.replace("-", "+");
}
}
</script>
</head>
<body>
<div id="menu">
<h1 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A</a></h1>
<span class="no">
<h2 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一级菜单A_1</a></h2>
<ul class="no">
<a href="javascript:void(0)">一级菜单A_0</a>
<a href="javascript:void(0)">一级菜单A_1</a>
<a href="javascript:void(0)">一级菜单A_2</a>
<a href="javascript:void(0)">一级菜单A_3</a>
</ul>
<h2 onclick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 一级菜单A_2</a></h2>
<ul class="no"> <a href="javascript:void(0)">一级菜单A_0</a>
<a href="javascript:void(0)">一级菜单A_1</a>
<a href="javascript:void(0)">一级菜单A_2</a>
<a href="javascript:void(0)">一级菜单A_3</a>
</ul> </span>
<h1 onclick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二级菜单B</a></h1>
<span class="no">
<h2 onclick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二级菜单B_1</a></h2>
<ul class="no">
<a href="javascript:void(0)">二级菜单B_0</a>
<a href="javascript:void(0)">二级菜单B_1</a>
<a href="javascript:void(0)">二级菜单B_2</a>
<a href="javascript:void(0)">二级菜单B_3</a>
</ul>
<h2 onclick="javascript:ShowMenu(this,1)">
<a href="javascript:void(0)">+ 二级菜单B_2</a></h2>
<ul class="no"> <a href="javascript:void(0)">二级菜单B_0</a>
<a href="javascript:void(0)">二级菜单B_1</a>
<a href="javascript:void(0)">二级菜单B_2</a>
</ul> </span>
<h1 onclick="javascript:ShowMenu(this,2)">
<a href="javascript:void(0)">+ 三级菜单C</a></h1>
<span class="no"> <h2 onclick="javascript:ShowMenu(this,0)">
<a href="javascript:void(0)">+ 三级菜单C_1</a></h2>
<ul class="no"> <a href="javascript:void(0)">三级菜单C_0</a>
<a href="javascript:void(0)">三级菜单C_1</a>
<a href="javascript:void(0)">三级菜单C_2</a> </ul>
<h2 onclick="javascript:ShowMenu(this,1)">
<a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
<ul class="no"> <a href="javascript:void(0)">三级菜单C_0</a>
<a href="javascript:void(0)">三级菜单C_1</a> </ul> </span>
<h1 onclick="javascript:ShowMenu(this,3)">
<a href="javascript:void(0)">+ 四级菜单D</a></h1> <span class="no">
<h2 onclick="javascript:ShowMenu(this,0)">
<a href="javascript:void(0)">+ 四级菜单D_1</a></h2> <ul class="no">
<a href="javascript:void(0)">四级菜单D_0</a>
<a href="javascript:void(0)">四级菜单D_1</a> </ul>
<h2 onclick="javascript:ShowMenu(this,1)">
<a href="javascript:void(0)">+ 四级菜单D_2</a></h2> <ul class="no">
<a href="javascript:void(0)">四级菜单D_0</a>
<a href="javascript:void(0)">四级菜单D_1</a>
<a href="javascript:void(0)">四级菜单D_2</a>
<a href="javascript:void(0)">四级菜单D_3</a>
</ul>
</span>
</div>
</body>
</html>
