javascript使用DOM模型和CSS实现菜单的折叠和展开

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
< title >  New Document  </ title >
< style  type ="text/css" >
<!--
dl             {     background-color : #000 ; color : #fff ; width : 100px ; }
dt             {     cursor : pointer ; width : 100% ; background-color : #666 ; }
.expand         {     overflow : visible ; }
.collapse         {     height : 16px ; overflow : hidden ; }
//-->
</ style >
< script  language ="JavaScript"   type ="text/javascript" >
<!--
function  toggleDl(dt){
     var  dl = dt.parentNode;
     if ( " collapse " == dl.className)dl.className = " expand " ;
     else  dl.className = " collapse " ;
}
// -->
</ script >
</ head >
</ ul >
< body >
< dl >
     < dt  onclick ="toggleDl(this)" > 根结点 </ dt >
     < dd > 子结点1 </ dd >
     < dd > 子结点2 </ dd >
     < dd > 子结点3 </ dd >
     < dd > 子结点4 </ dd >
     < dd > 子结点5 </ dd >
</ dl >
</ body >
</ html >