<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>树状菜单的简单实现</title>
<script language="网页特效" type="text/javascript">
<!--
function toggle(_dt){
var _dl=_dt.parentnode;
if(_dl.classname=="collaps教程e")_dl.classname="expand";
else _dl.classname="collapse";
}
//-->
</script>
<style type="text/css教程">
<!--
dl dt { cursor:pointer;padding:3px;}
dl dd { padding:3px;}
.expand { height:auto;}
.collapse { height:20px;overflow:hidden;}
-->
</style>
</head>
<body>
<dl>
<dt onclick="toggle(this)">根结点</dt>
<dd>子结点1</dd>
<dd>子结点2</dd>
<dd>子结点3</dd>
<dd>子结点4</dd>
</dl>
</body>
</html>
实例二一款复杂实例的树形菜单
<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>
实例三
<html>
<head>
<title>菜单树(我成功完成了)</title>
<script language="javascript">
/*处理菜单树的显示样式*/
function makemenu1(){
/*获取到id为t1的table*/
var table1 = document.getelementbyid("t1");
/*table1.style.display==""判断table1是否是是显示状 态，如果是当我们单击的时候就将他设为应藏状态，否则设置为隐藏状态*/
if(table1.style.display==""){
table1.style.display="none";
}else{
table1.style.display="";
}}
/*功能和mekemenu1是一模一样的*/
function makemenu2(){
var table2 = document.getelementbyid("t2");
if(table2.style.display==""){
table2.style.display="none";
}else{
table2.style.display="";
}
}function makemenu3(){
var table3 = document.getelementbyid("t3");
if(table3.style.display==""){
table3.style.display="none";
}else{
table3.style.display="";
}
}
</script>
</head>
<body>
<form id="f1">
<table >
<tr>
<td>
<input type="button" style="width:11em" onclick="makemenu1()"/>
<%-- style="display:none" 默认的情况下设置为隐藏--%>
<table id="t1" style="display:none">
<tr>
<td>彩艳1www.111cn.net</td>
</tr><tr>
<td>于艳1</td>
</tr><tr>
<td>王艳1</td>
</tr>
</table>
</td>
</tr><tr>
<td>
<input type="button" style="width:11em" onclick="makemenu2()"/>
<table style="display:none" id="t2">
<tr>
<td>彩艳2</td>
</tr><tr>
<td>于艳2</td>
</tr><tr>
<td>王艳2</td>
</tr>
</table>
</td>
</tr><tr>
<td>
<input type="button" style="width:11em" onclick="makemenu3()"/>
<table style="display:none" id="t3">
<tr>
<td>彩艳3</td>
</tr><tr>
<td>于艳3www.111cn.net</td>
</tr><tr>
<td>王艳3</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>