两例DIV＋JS三级折叠菜单，实用于后台管理

1、默认全部闭合状态：

 

代码

<! 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,ul,h1,h2 { margin : 0 ; padding : 0 ; list-style : none ; }
body { font : 12px "宋体" ; padding-top : 20px ; }
a { color : #777 ; border : none ; }
#menu { width : 200px ; margin : auto ; }
#menu h1 { font-size : 12px ; border : #C60 1px solid ; margin-top : 1px ; background-color : #F93 ; }
#menu h2 { font-size : 12px ; border : #E7E7E7 1px solid ; border-top-color : #FFF ; background-color : #F4F4F4 ; }
#menu ul { padding-left : 15px ; height : 100px ; border : #E7E7E7 1px solid ; border-top : none ; overflow : auto ; }
#menu a { display : block ; padding : 5px 0 3px 10px ; text-decoration : none ; overflow : hidden ; }
#menu a:hover { color : #6F0 ; background : #000 ; }
#menu .no { display : none ; }
#menu .h1 a { color : #6F0 ; }
#menu .h2 a { color : #06F ; }
#menu h1 a { color : #FFF ; }
</ 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 ></ a ></ h1 >
< span class ="no" >
< h2 onClick ="javascript:ShowMenu(this,0)" >< a href ="javascript:void(0)" > + 一级菜单A_1 </ a ></ 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 >
< 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 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 >
< 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 onClick ="javascript:ShowMenu(this,2)" >< a href ="javascript:void(0)" > + 一级菜单A_3 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,3)" >< a href ="javascript:void(0)" > + 一级菜单A_4 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,4)" >< a href ="javascript:void(0)" > + 一级菜单A_5 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,5)" >< a href ="javascript:void(0)" > + 一级菜单A_6 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,6)" >< a href ="javascript:void(0)" > + 一级菜单A_7 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,7)" >< a href ="javascript:void(0)" > + 一级菜单A_8 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,8)" >< a href ="javascript:void(0)" > + 一级菜单A_9 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,9)" >< a href ="javascript:void(0)" > + 一级菜单A_10 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,10)" >< a href ="javascript:void(0)" > + 一级菜单A_11 </ 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 >
< 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 onClick ="javascript:ShowMenu(this,11)" >< a href ="javascript:void(0)" > + 一级菜单A_12 </ 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 >
< 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 >
</ 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 >
< 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 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 >
< 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 >
</ 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 >
< 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 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 >
< 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 >
</ 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 >
< 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 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 >
< 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 >
</ span >
</ div >
</ body >
</ html >

 

 

 

2、默认第一项打开状态：

 

 

代码

<! 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 >

 

 

演示：http://www.websjy.com/bbs/viewthread.php?tid=8520

转载于:https://www.cnblogs.com/websjy/archive/2010/12/15/1906602.html