只有两层结构的树型菜单 简单实现

        如果菜单级别较少,而且需要实现的功能不多时,直接使用javascript脚本操作会相对于使用控件性能高一些。 

下面假设菜单栏最多只有两层结构：

<TABLE id="table1" cellSpacing=0 cellPadding=0 width=140 align=center border=0>
  <TBODY>

    <TR onClick="showsubmenu('submenuboard4','subimgboard4','aimgboard4','fopen.gif','fclose.gif')">
      <TD width=18><img src=images/index/close.gif alt="展开菜单" width="18" height="18" id=subimgboard4></TD>
      <TD vAlign=center width=18><img src=fclose.gif alt="展开菜单" width="16" height="18" id=aimgboard4></TD>
      <TD width=104 align="left" vAlign=center><a href=index.asp?boardid=127 target=window_main>一级菜单显示的内容</TD>
    </TR>

    <TR style="display:none" id='submenuboard4'>               <!-- 二级菜单 -->
      <TD background=vertline.gif></TD>                                  <!--  竖型虚线，类似于资源管理器 -->

      <TD colSpan=2><TABLE border=0 align="left" cellPadding=0 cellSpacing=0>
          <TBODY>
           
            <TR>
              <TD><IMG src="/node.gif"></TD>                                 <!--  交叉虚线 -->
              <TD><IMG src="images/index/doc.gif"></TD>           <!-- 二级菜单显示的图片 -->   

               <TD align="left"><a href=index.asp?boardid=129 target=window_main>二级菜单显示的标题</a></TD>
            </TR>
            
            <TR>
              <TD><IMG src="/node.gif"></TD>                                 <!--  交叉虚线 -->
              <TD><IMG src="images/index/doc.gif"></TD>           <!-- 二级菜单显示的图片 -->   

               <TD align="left"><a href=index.asp?boardid=129 target=window_main>二级菜单显示的标题</a></TD>
            </TR>
          </TBODY>
      </TABLE></TD>
    </TR>
  </TBODY>
</TABLE>

javascript 脚本：

<SCRIPT language=javascript>

function showsubmenu(ss,ii,aa,openimg,closeimg)
{
       var menuobjedt=document.getElementById(ss);
        if (menuobjedt)
       {
            if (menuobjedt.style.display=="none") 
              {

                      menuobjedt.style.display="";
                      document.getElementById(ii).src="images/index/open.gif";
                      document.getElementById(ii).alt="关闭菜单";
                      document.getElementById(aa).src="images/index/"+openimg;
                      document.getElementById(aa).alt="关闭菜单";
            }
             else
              {

                      menuobjedt.style.display="none"; 
                       document.getElementById(ii).src="images/index/close.gif";
                       document.getElementById(ii).alt="展开菜单";
                       document.getElementById(aa).src="images/index/"+closeimg;
                       document.getElementById(aa).alt="展开菜单";
             }
       }
}

</SCRIPT>
           

二、参考：

1、电子开发论坛：http://www.epcb.net/