js後台常用的伸縮(折疊)菜單代碼

 <style type="text/css">

*{margin:0;padding:0;} body{padding-top:10px;} div{width:150px;height:22px;margin-left:10px;overflow:hidden;font-size:12px;background:#FFF;} div div{clear:both;height:22px;margin:0;padding-left:25px;font-size:13px;line-height:22px;background:#CCC;cursor:pointer;} div ul li{list-style:none;} a:link,a:visited{width:121px;height:20px;padding-left:29px;line-height:20px;color:#000;text-decoration:none;display:block;} a:hover{background:#eee;} </style> HTML部分 <div style="height:auto">  <div>菜單一</div>  <ul>   <li><a href="#">功能一</a></li>   <li><a href="#">功能二</a></li>  </ul> </div> <div>菜單二</div> <ul> <li><a href="#">功能一</a></li> <li><a href="#">功能二</a></li> </ul> </div> <div>菜單三</div> <ul> <li><a href="#">功能一</a></li> <li><a href="#">功能二</a></li> </ul> </div><div style="height:auto;color:#666;line-height:20px;cursor:default;">  <div style="color:#000;">版本信息</div>   名稱:<br />   版本:<br />   核心:<br /> </div>     <script type="text/javascript"> window.onload=function(){ var div=document.getElementsByTagName("div");  for(i=0;i<div.length-2;i++){   if(i%2!=0){     if(div[i-1].getElementsByTagName("ul").length>0){    div[i].divid=i;    div[i].onclick=function(){     var div=document.getElementsByTagName("div");     for(j=0;j<div.length-2;j++){       if(j%2==0&&j+1!=this.divid){         div[j].style.height="22px";        }      }     var div=this.offsetHeight;     var Div=this.parentNode;     var DivClass=Div.offsetHeight;     if(DivClass<=div){Div.style.height="auto";}else{Div.style.height="22px";}      }    }     }   }  } </script></td>  </tr> </table>