一个不错的实现折叠效果的方法

 

< html >    
   < head >    
   < meta    http-equiv ="Content-Type"    content ="text/html;   charset=gb2312" >    
   < title > 菜单 </ title >    
   < link    href ="css.css"    rel ="stylesheet"    type ="text/css" >    
    
   < style > ...    
  input   
  {...}{   
  border:1px   solid   #618fff;   
  width:100;   
  overflow:visible;   
  }   
  button   
  {...}{   
  border:1px   solid     #618fff;   
    
  width:60;   
  overflow:visible;   
  margin-left:2;   
  cursor:hand;   
  font-size:12;   
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#eaeaff',   endColorStr='#618fff',   gradientType='0');   
  }   
  body   
  {...}{   
  font-size:12;     
    
  }   
  td   
  {...}{   
  font-size:12;   
  text-indent:3;   
  }   
  th   
  {...}{   
  letter-spacing:10;   
  font-size:12;   
  height:20;   
  color:navy;   
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#eaeaff',   endColorStr='#618fff',   gradientType='0');   
  }   
    
  table   
  {...}{   
    margin-left:10;   
    border:4px   #618fff   double   ;   
    border-collapse:collapse;     
    width:98%;   
  }   
  textarea     
  {...}{   
  margin-left:10;   
  overflow:visible;   
  width:98%;   
  height:300;   
  border:1px   #618fff   solid;   
  }   
  ul   {...}{   
  margin-top:   0px;   
  margin-right:   0px;   
  margin-bottom:   0px;   
  margin-left:   20px;   
  text-align:   left;   
  }   
   </ style >    
   </ head >    
    
   < body    onselectstart ="document.selection.clear();" >    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 音乐库 </ th >    
       </ tr >    
       < tr >    
           < td >    
    
   < ul >    
   < li >< a    href ="music/area.asp" > 大类管理 </ a ></ li >    
   < li >< a    href ="music/artist.asp" > 歌手管理 </ a ></ li >    
   < li >< a    href ="music/collection.asp" > 专辑管理 </ a ></ li >    
   < li >< a    href ="music/song.asp" > 歌曲管理 </ a ></ li >    
   < li >< a    href ="lib_batch.htm" > 批量上传 </ a ></ li >    
   </ ul >    
    
    
   </ td >    
       </ tr >    
   </ table >    
    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 评论 </ th >    
       </ tr >    
       < tr >    
           < td >   < ul >    
   < li >< a    href ="comment/comment.asp" > 类别管理    </ a ></ li >    
   < li >< a    href ="comment/com_content.ASP" > 评论管理 </ a >     </ li >    
                     </ ul >    
    
    
      
   </ td >    
       </ tr >    
   </ table >    
    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 新闻 </ th >    
       </ tr >    
       < tr >    
           < td >    
    
   < ul >    
   < li >< a    href ="News/news_class_manage.htm" > 类别管理    </ a ></ li >    
   < li >< a    href ="News/news_append.htm" > 发布新闻    </ a ></ li >    
   < li >< a    href ="News/news_manage.htm" > 新闻管理 </ a ></ li >    
      
   </ ul >    
    
    
   </ td >    
       </ tr >    
   </ table >    
    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 排行 </ th >    
       </ tr >    
       < tr >    
           < td >    
   < ul >    
   < li >< a    href ="sort/Sort_manage.asp?kind=最受欢迎" > 最受欢迎排行管理 </ a ></ li >    
   < li >< a    href ="sort/Sort_manage.asp?kind=销售排行" > 销售排行管理 </ a ></ li >    
   </ ul >    
    
   </ td >    
       </ tr >    
   </ table >    
    
    
    
    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 游戏原声 </ th >    
       </ tr >    
       < tr >    
           < td >    
   < ul >    
   < li >< a    href ="yuansheng/yuansheng_class_manage.asp" > 类别管理    </ a ></ li >    
   < li >< a    href ="./common/common_manage.asp?TB=MediaGame&Fields=MediaTitle,Photo,FileName&HK=ID&Title=媒体名称,照片,文件名" > 文件管理    </ a ></ li >    
   </ ul >    
    
   </ td >    
       </ tr >    
   </ table >    
    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 音乐DIY </ th >    
       </ tr >    
       < tr >    
           < td >   < ul >    
   < li >< a    href ="diy/diy_class_manage.asp" > 类别管理    </ a ></ li >    
   < li >< a    href ="./common/common_manage.asp?TB=MediaDIY&Fields=MediaTitle,Artist,FileName&HK=ID&Title=媒体名称,歌手,文件名" > 文件管理    </ a ></ li >    
   </ ul >    
    
    
   </ td >    
       </ tr >    
   </ table >    
    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 在线演唱会 </ th >    
       </ tr >    
       < tr >    
           < td >    
   < ul >    
   < li >< a    href ="./common/common_manage.asp?TB=SingOnline&Fields=Title,Artist,FileName&HK=ID&Title=媒体名称,歌手,文件名" > 音乐会管理 </ a ></ li >    
    
   </ ul >    
    
    
   </ td >    
       </ tr >    
   </ table >    
    
    
    
   < table    width ="150"      border ="1" >    
       < tr >    
           < th > 版权 </ th >    
       </ tr >    
       < tr >    
           < td >    
   < ul >    
   < li >< a    href ="./common/common_manage.asp?TB=copyright&Fields=copyright&HK=ID&Title=版权类型" > 版权类别管理 </ a >     </ li >    
     </ ul >    
    
   </ td >    
       </ tr >    
   </ table >    
   < SCRIPT    LANGUAGE ="JavaScript" > ...    
  var   TB   =   document.getElementsByTagName("Table")   
  var   TR   
  for(i=0;i<TB.length;i++)   
  ...{   
  TR   =   TB[i].rows[0];   
  TR.style.cursor="hand";   
  TR.attachEvent("onclick",show)   
  if(i!=0)   
  ...{   
  TB[i].rows[1].style.display   =   "none";   
  }   
    
  }   
  function   show()   
  ...{   
  var   TD   =   event.srcElement;   
  var   TB   =   TD.parentElement;   
  while(TB.tagName   !=   "TABLE")   
  ...{   
  TB   =   TB.parentElement   
  }   
  var   TR   =   TB.rows[1]   
  if(TR.style.display   ==   "none")   
  ...{   
  TR.style.display   =   ""   
  }   
  else   
  ...{   
  TR.style.display   =   "none"   
  }   
      
  }   
   </ SCRIPT >    
   </ body >    
   </ html >