两例DIV＋JS三级折叠菜单，实用于后台管理
2010-12-15 13:07
357 查看
1、默认全部闭合状态：
代码
演示：http://www.websjy.com/bbs/viewthread.php?tid=8520
代码
<!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
){return false;}
if(dd
.style.display == "block"){
obj.className = "";
obj.innerHTML = obj.innerHTML.replace("-","+");
dd
.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>演示：http://www.websjy.com/bbs/viewthread.php?tid=8520
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 拿来就能用的JS后台折叠管理菜单代码
- 超简单的js网站后台管理功能折叠菜单代码
- JS实现三级折叠菜单特效，其它级可自动收缩
- js实现的后台左侧管理菜单代码
- JS+CSS打造三级折叠菜单，自动收缩其它级 js
- [网页设计] 27款后台管理页面设计 DIV+CSS+JS
- 下拉水平菜单 js div+css 超实用 可链接数据库
- JS三级折叠菜单特效 自动收缩其它级
- 水平和垂直方向的三级PopMenu-弹出菜单（DIV+CSS+JS）
- 27款后台管理页面设计 DIV+CSS+JS
- DIV+js后台左侧专用菜单
- js实现的后台左侧管理菜单代码
- div+css横向下拉三级菜单(无js)
- UI - 竖向折叠手风琴导航菜单[JS+div+css]
- [网页设计] 27款后台管理页面设计 DIV+CSS+JS
- DIV+JS实现可展开、折叠的菜单代码
- JS实现适合于后台使用的动画折叠菜单效果
- JS实现可编辑的后台管理菜单功能【附demo源码下载】
- JS实现三级折叠菜单特效，其它级可自动收缩
- 27款后台管理页面设计 DIV+CSS+JS