三级折叠菜单
- 发表于
- 前端
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三级折叠菜单</title>
<style>
body,dl,ul,dt,dd,h2{ margin:0; padding:0;}
body{font:12px "宋体"; padding-top:20px;}
#menu { width:200px; margin:0 auto;}
#menu dt {font-weight:700; font-size:12px; border:#C60 1px solid; margin-top:1px;background-color:#F93;}
#menu dd {display:none;}
#menu dd h2 {display:block; font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;}
#menu dd ul { display:none;height:100px; padding-left:15px; border:#E7E7E7 1px solid; border-top:none; overflow:auto;}
#menu a {color:#777; border:none; text-decoration:none;display:block; padding:5px 0 3px 10px; ; overflow:hidden;}
#menu dt a { color:#FFF; }
#menu dt.off a{color:#6F0;}
#menu h2.off a{color:#00F;}
#menu a:hover{ color:#6F0; background-color:#333;}
</style>
</head>
<body>
<dl id="menu">
<dt><a href="javascript:void(0)">+ 一级菜单A</a></dt>
<dd>
<h2><a href="javascript:void(0)">+ 一级菜单A_1</a></h2>
<ul>
<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>
<a href="javascript:void(0)">一级菜单A_4</a>
<a href="javascript:void(0)">一级菜单A_5</a>
<a href="javascript:void(0)">一级菜单A_6</a>
<a href="javascript:void(0)">一级菜单A_7</a>
<a href="javascript:void(0)">一级菜单A_8</a>
<a href="javascript:void(0)">一级菜单A_9</a>
</ul>
<h2><a href="javascript:void(0)">+ 一级菜单A_2</a></h2>
<ul>
<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>
<a href="javascript:void(0)">一级菜单A_4</a>
<a href="javascript:void(0)">一级菜单A_5</a>
<a href="javascript:void(0)">一级菜单A_6</a>
<a href="javascript:void(0)">一级菜单A_7</a>
<a href="javascript:void(0)">一级菜单A_8</a>
<a href="javascript:void(0)">一级菜单A_9</a>
</ul>
<h2><a href="javascript:void(0)">+ 一级菜单A_3</a></h2>
<ul>
<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>
<a href="javascript:void(0)">一级菜单A_4</a>
<a href="javascript:void(0)">一级菜单A_5</a>
<a href="javascript:void(0)">一级菜单A_6</a>
<a href="javascript:void(0)">一级菜单A_7</a>
<a href="javascript:void(0)">一级菜单A_8</a>
<a href="javascript:void(0)">一级菜单A_9</a>
</ul>
<h2><a href="javascript:void(0)">+ 一级菜单A_4</a></h2>
<ul>
<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>
<a href="javascript:void(0)">一级菜单A_4</a>
<a href="javascript:void(0)">一级菜单A_5</a>
<a href="javascript:void(0)">一级菜单A_6</a>
<a href="javascript:void(0)">一级菜单A_7</a>
<a href="javascript:void(0)">一级菜单A_8</a>
<a href="javascript:void(0)">一级菜单A_9</a>
</ul>
</dd>
<dt><a href="javascript:void(0)">+ 二级菜单B</a></dt>
<dd>
<h2><a href="javascript:void(0)">+ 二级菜单B_1</a></h2>
<ul>
<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>
<a href="javascript:void(0)">二级菜单B_4</a>
<a href="javascript:void(0)">二级菜单B_5</a>
<a href="javascript:void(0)">二级菜单B_6</a>
<a href="javascript:void(0)">二级菜单B_7</a>
<a href="javascript:void(0)">二级菜单B_8</a>
<a href="javascript:void(0)">二级菜单B_9</a>
</ul>
<h2><a href="javascript:void(0)">+ 二级菜单B_2</a></h2>
<ul>
<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>
<a href="javascript:void(0)">二级菜单B_4</a>
<a href="javascript:void(0)">二级菜单B_5</a>
<a href="javascript:void(0)">二级菜单B_6</a>
<a href="javascript:void(0)">二级菜单B_7</a>
<a href="javascript:void(0)">二级菜单B_8</a>
<a href="javascript:void(0)">二级菜单B_9</a>
</ul>
</dd>
<dt><a href="javascript:void(0)">+ 三级菜单C</a></dt>
<dd>
<h2><a href="javascript:void(0)">+ 三级菜单C_1</a></h2>
<ul>
<a href="javascript:void(0)">三级菜单C_0</a>
<a href="javascript:void(0)">三级菜单C_1</a>
<a href="javascript:void(0)">三级菜单C_2</a>
<a href="javascript:void(0)">三级菜单C_3</a>
<a href="javascript:void(0)">三级菜单C_4</a>
<a href="javascript:void(0)">三级菜单C_5</a>
<a href="javascript:void(0)">三级菜单C_6</a>
<a href="javascript:void(0)">三级菜单C_7</a>
<a href="javascript:void(0)">三级菜单C_8</a>
<a href="javascript:void(0)">三级菜单C_9</a>
</ul>
<h2><a href="javascript:void(0)">+ 三级菜单C_2</a></h2>
<ul>
<a href="javascript:void(0)">三级菜单C_0</a>
<a href="javascript:void(0)">三级菜单C_1</a>
<a href="javascript:void(0)">三级菜单C_2</a>
<a href="javascript:void(0)">三级菜单C_3</a>
<a href="javascript:void(0)">三级菜单C_4</a>
<a href="javascript:void(0)">三级菜单C_5</a>
<a href="javascript:void(0)">三级菜单C_6</a>
<a href="javascript:void(0)">三级菜单C_7</a>
<a href="javascript:void(0)">三级菜单C_8</a>
<a href="javascript:void(0)">三级菜单C_9</a>
</ul>
</dd>
<dt><a href="javascript:void(0)">+ 四级菜单D</a></dt>
<dd>
<h2><a href="javascript:void(0)">+ 四级菜单D_1</a></h2>
<ul>
<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>
<a href="javascript:void(0)">四级菜单D_4</a>
<a href="javascript:void(0)">四级菜单D_5</a>
<a href="javascript:void(0)">四级菜单D_6</a>
<a href="javascript:void(0)">四级菜单D_7</a>
<a href="javascript:void(0)">四级菜单D_8</a>
<a href="javascript:void(0)">四级菜单D_9</a>
</ul>
<h2><a href="javascript:void(0)">+ 四级菜单D_2</a></h2>
<ul>
<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>
<a href="javascript:void(0)">四级菜单D_4</a>
<a href="javascript:void(0)">四级菜单D_5</a>
<a href="javascript:void(0)">四级菜单D_6</a>
<a href="javascript:void(0)">四级菜单D_7</a>
<a href="javascript:void(0)">四级菜单D_8</a>
<a href="javascript:void(0)">四级菜单D_9</a>
</ul>
</dd>
</dl>
<script language="JavaScript">
<!--//
function $Id(Id){return document.getElementById(Id);}
function $Tag(id,Tag){return id.getElementsByTagName(Tag);}
function ShowMenu(e){
var $dt = $Tag($Id(e),"dt");
var $dd = $Tag($Id(e),"dd");
$dd[0].style.display = "block";
for(var t=0;t<$dt.length;t++){
$dt[t].value=t;
$dt[t].onclick = function(){return ShowClose(this,this.value);}
var $h2 = $Tag($dd[t],"h2");
for(var h=0;h<$h2.length;h++){
$h2[h].value=h;
$h2[h].onclick = function(){return ShowClose(this,this.value);}
}
}
function ShowClose(obj,n){
var dt = $Tag(obj.parentNode,obj.tagName);
var dd = $Tag(obj.parentNode,[obj.parentNode.tagName!="DL"?"ul":"dd"]);
if(dd.length==0 || !dd[n]){return false;}
if(dd[n].style.display == "block"){
obj.className = "";
obj.innerHTML = obj.innerHTML.replace("-","+");
dd[n].style.display = "none";
return false;
}
for(var i=0;i<dt.length;i++){
dt[i].innerHTML=[i!=n?dt[i].innerHTML.replace("-","+"):dt[i].innerHTML.replace("+","-")];
dt[i].className=[i!=n?"":"off"];
}
for(var i=0;i<dd.length;i++){dd[i].style.display=[i!=n?"none":"block"];}
}
}
new ShowMenu( "menu");
//-->
</script>
</body>
</html>
原文连接：三级折叠菜单
所有媒体，可在保留署名、
原文连接的情况下转载，若非则不得使用我方内容。
