javascript+CSS树形菜单
来源：互联网 发布：国产的cad软件 编辑：程序博客网 时间：2024/05/08 15:36
<!--此树状菜单的原理只要就是利用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"> </td>
<td width="105">二级菜单1</td>
</tr>
<tr>
<td> </td>
<td>二级菜单2</td>
</tr>
<tr>
<td> </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"> </td>
<td width="105">二级菜单1</td>
</tr>
<tr>
<td> </td>
<td>二级菜单2</td>
</tr>
<tr>
<td> </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"> </td>
<td width="105">二级菜单1</td>
</tr>
<tr>
<td> </td>
<td>二级菜单2</td>
</tr>
<tr>
<td> </td>
<td>二级菜单3</td>
</tr>
</table>
</td>
</tr>
</table>
<!--代码结束-->
