改了几个名字
大类的ID用DV+3个字符表示
中类的ID用DV+4个字符表示
小类的ID用DV+5个字符表示
约定好之后就可以用下面这段代码:
------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type"    content="text/html;    charset=gb2312">
<title>Tree</title>
<script    language="javascript">
var display="none";
function    show(IMG,DV,Big)
{ if(DV.style.display=="none")
{
if(Big==1)
{
display="block";
showall();
}
else{//如果不是第一级
  closemenu(DV.id.length);//关掉平级的(根据你命名的规律)
} DV.style.display="block";
IMG.src="images/btnDel.gif"

}
else
{
DV.style.display="none";
IMG.src="images/btnAdd.gif"                                
}
}
var    i;
function closemenu(len){
var divTags=document.getElementsByTagName("div");
  for(i=0;i<divTags.length;i++)
{
 if(divTags[i].id.length==len){//如果是平级的菜单,则关掉所有平级的菜单
    divTags[i].style.display="none";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif";
 }
}
}
function showall()
{
var divTags=document.getElementsByTagName("div");
 //alert(divTags[10].id.replace("DV",""));
if(display=="none")
{
for(i=0;i<divTags.length;i++)
{
divTags[i].style.display="block";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnDel.gif";
display="block"
}
}
else
{
for(i=0;i<divTags.length;i++)
{
divTags[i].style.display="none";
eval("IMG"+divTags[i].id.replace("DV","")).src="images/btnAdd.gif";
display="none";
}
}
}
</script>
</head><body><table border="1" width="760" height="400">
  <tr>
    <td width="50%"> </td>
    <td width="50%"> </td>
  </tr>
  <tr>
    <td width="50%"> </td>
    <td width="50%">      <table width="90%" border="1" align="left" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
        <tr align="center" onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
          <td width="*" bgcolor="#EEEEEE"><a href="#" ONCLICK='showall()'>打开</a> <a href="#" ONCLICK='showall()'>关闭</a>
  </td>
        </tr>
      </table>  <p>&nbsp;</p>
      <table width="45%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0" cellspacing="0">
        <tr align="center" ONCLICK="show(IMG001,DV001,1)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
          <td width="16" scope="row"><img id="IMG001" src="images/btnAdd.gif"></td>
          <td width="*" bgcolor="#EEEEEE">大类1</td>
        </tr>
     </table>
 <!--Begin    of    2-->
     <DIV id='DV001' style='display:none'>
     <table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0"    cellspacing="0">
       <tr align="center" ONCLICK="show(IMG0010,DV0010,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
         <td width="16"><img id="IMG0010" src="images/btnAdd.gif"></td>
         <td width="*"    bgcolor="#EEEEEE">中类1</td>
       </tr>
     </table>
                                                <!--Begin    of    3-->
     <DIV id="DV0010" style='display:none'>
     <table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc"    bordercolordark="#ffffff"    cellpadding="0"    cellspacing="0">
       <tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'"    align="center">
         <td width="16" bgcolor="#eeeeee"><img id="IMG00101" src="images/btnAdd.gif"></td>
         <td width="*" bgcolor="#eeeeee">小类1</td>
       </tr>
     </table>    </DIV><!--End    of    3-->
     <table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff" cellpadding="0"    cellspacing="0">
       <tr align="center" ONCLICK="show(IMG0020,DV0020,0)" STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'">
         <td width="16"><img id="IMG0020" src="images/btnAdd.gif"></td>
         <td width="*"    bgcolor="#EEEEEE">    中类12</td>
       </tr>
     </table>
     
 <DIV id="DV0020" style='display:none'>
     <table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc"    bordercolordark="#ffffff"    cellpadding="0"    cellspacing="0">
       <tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'"    align="center">
         <td width="16" bgcolor="#eeeeee"><img id="IMG00201" src="images/btnAdd.gif"></td>
         <td width="*" bgcolor="#eeeeee">小类12</td>
       </tr>
     </table>    </DIV><!--End    of    3-->    </DIV><!--End    of    2-->
     <p>&nbsp;</p>
     <table width="45%" border="1" bordercolorlight="#cccccc" bordercolordark="#ffffff"    cellpadding="0"    cellspacing="0">
       <tr align="center" ONCLICK="show(IMG002,DV002,1)" STYLE='CURSOR:HAND'    onMouseOver="this.bgColor='#eeeeee'"    onmouseout="this.bgColor='#ffffff'">
         <td width="16" scope="row"><img id="IMG002" src="images/btnAdd.gif"></th>
         <td width="*" bgcolor="#EEEEEE">大类2</td>
       </tr>
     </table>
                <!--Begin    of    2-->
     <DIV id='DV002' style='display:none'>
     <table style="margin-left:20px;" width="65%" border="1" bordercolorlight="#cccccc"    bordercolordark="#ffffff"    cellpadding="0"    cellspacing="0">
       <tr align="center" ONCLICK="show(IMG0021,DV0021,0)"    STYLE='CURSOR:HAND'    onMouseOver="this.bgColor='#eeeeee'"    onmouseout="this.bgColor='#ffffff'">
         <td width="16"><img id="IMG0021"    src="images/btnAdd.gif"></td>
         <td width="*" bgcolor="#EEEEEE">    中类2</td>
       </tr>
     </table>
                                                <!--Begin    of    3-->
     <DIV id="DV0021"    style='display:none'>
     <table style="margin-left:40px;" width="75%" border="1" bordercolorlight="#cccccc"    bordercolordark="#ffffff"    cellpadding="0"    cellspacing="0">
       <tr STYLE='CURSOR:HAND' onMouseOver="this.bgColor='#eeeeee'" onmouseout="this.bgColor='#ffffff'"    align="center">
         <td width="16" bgcolor="#eeeeee"><img id="IMG00211" src="images/btnAdd.gif"></td>
         <td width="*" bgcolor="#eeeeee">小类2</td>
       </tr>
     </table>
          </DIV><!--End    of    3-->     </DIV><!--End    of    2-->
     </td>
   </tr>
</table></body>
</html>