如何实现树形结构，可以一层一层点了展开的，谢谢

 
<html>
<title></title>
<script>
    function Display(rButton, rItems)
    {
    
     if ((rItems.style.display == "") || (rItems.style.display == "none")) {
     rItems.style.display = "block";
     rButton.src = "img/minus.gif";
     } else {
     rItems.style.display = "none";
     rButton.src = "img/plus.gif";
     }
     return false;
    }
</script>
<body bgcolor="#000000">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr align=top>
    <td width="96%" align=top><div id='main1' style='color:blue'>
<b><img src='img/plus.gif' border=0 ID=pic1 onclick="Display(pic1,child1)"><a href='GIMWD010.jsp?fid=165&mode=1&groupid=78' target='content'><nobr><font size=-1 color=#ffffff>My Files(1)</font></nobr></a></b>
</div>
<div id='child1' style='display:none'>
<div id='main2' style='color:blue'>
<img src='img/e_vline.gif' width=16 height=16><b><img src='img/plus.gif' border=0 ID=pic2 onclick="Display(pic2,child2)"><a href='GIMWD010.jsp?fid=268&mode=1&groupid=78' target='content'><nobr><font size=-1 color=#ffffff>Office(0)</font></nobr></a></b>
</div>
<div id='child2' style='display:none'>
</div>
</div>
<div id='main8' style='color:blue'>
<b><img src='img/plus.gif' border=0 ID=pic8 onclick="Display(pic8,child8)"><a href='GIMWD010.jsp?fid=166&mode=1&groupid=78' target='content'><nobr><font size=-1 color=#ffffff>My Pictures(0)</font></nobr></a></b>
</div>
<div id='child8' style='display:none'>
</div>
<div id='main18' style='color:blue'>
<b><img src='img/plus.gif' border=0 ID=pic18 onclick="Display(pic18,child18)"><a href='GIMWD010.jsp?fid=384&mode=1&groupid=78' target='content'><nobr><font size=-1 color=#ffffff>My Musics(0)</font></nobr></a></b>
</div>
<div id='child18' style='display:none'>
</div>
</td>
  </tr>
</table>
</body>
</html>