javascript+CSS树形菜单

<!-- 此树状菜单的原理只要就是利用CSS的display属性，
当display = " none " 时，就不显示子菜单，当display时，又重新显示子菜单，
只要你搞明白了下面这一段代码，相信你绝对能扩展它的功能，把它做得更复杂点，更美观点，谢谢
可以加上链接，展开时是一种图片，收合时又显示另一种图片，为了使本文更适合初学者，这些代码我就不写了，搞明白下面代码之后你就可以慢慢想如何扩展。。
先给点提示，使用document.getElementById( " 图片ID " ).src = " 新图片地址 " , 可以动态更换图片
-->
<!--
版权信息: javascript + CSS树形菜单,
本代码为免费发布,但使用时请勿去除作者版权信息
本声明没有任何法律效力,作为一个程序员,尊重他人版权,也等于尊重自己版权,谢谢合作
作者:王颂元
出处:www.web745.com

-->
< script language = " javascript " >
     function  change_view(obj_name)
     ... {
        var aa=document.getElementById(obj_name);
        if(aa.style.display=="")
        ...{
            aa.style.display="none";
        }
        else
        ...{
            aa.style.display="";
        }
    }
</ script >

< table width = " 160 "  border = " 1 " >
       < tr onClick = " change_view('a1') " >
         < td > ●树形菜单根目录1 </ td >
       </ tr >
      < tr id = " a1 " style = " display:none " >     <!--  如果想一打开网页菜单就是展开的，此处删除none --->
         < td >
             < table width = " 143 "  border = " 0 " >
                   < tr >
                     < td width = " 28 " >& nbsp; </ td >
                     < td width = " 105 " > 二级菜单1 </ td >
                   </ tr >
                   < tr >
                     < td >& nbsp; </ td >
                     < td > 二级菜单2 </ td >
                   </ tr >
                   < tr >
                     < td >& nbsp; </ td >
                     < td > 二级菜单3 </ td >
                   </ tr >
             </ table >
         </ td >
   </ tr >
  
  
     < tr onClick = " change_view('a2') " >
         < td > ●树形菜单根目录2 </ td >
       </ tr >
       < tr id = " a2 " style = " display:none " >
         < td >
             < table width = " 143 "  border = " 0 " >
                   < tr >
                     < td width = " 28 " >& nbsp; </ td >
                     < td width = " 105 " > 二级菜单1 </ td >
                   </ tr >
                   < tr >
                     < td >& nbsp; </ td >
                     < td > 二级菜单2 </ td >
                   </ tr >
                    < tr >
                     < td >& nbsp; </ td >
                     < td > 二级菜单3 </ td >
                    </ tr >
             </ table >
         </ td >
   </ tr >
  
  
     < tr onClick = " change_view('a3') " >
         < td > ●树形菜单根目录3 </ td >
       </ tr >
       < tr id = " a3 " style = " display:none " >
             < td >
             < table width = " 143 "  border = " 0 " >
                   < tr >
                     < td width = " 28 " >& nbsp; </ td >
                     < td width = " 105 " > 二级菜单1 </ td >
                   </ tr >
                   < tr >
                     < td >& nbsp; </ td >
                     < td > 二级菜单2 </ td >
                   </ tr >
                   < tr >
                     < td >& nbsp; </ td >
                     < td > 二级菜单3 </ td >
                   </ tr >
             </ table >
         </ td >
   </ tr >
  </ table >

<!-- 代码结束 -->