两例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