如何实现菜单的折叠和伸展？

看看CSDN左边的导航树吧：http://www.meizz.com/Web/Download/MzTreeView10.rar

解决方案 »

  1.   

    参考
    图片自己设计就可以，如果没有与我联系！<html>
    <head>
    <script language="javascript">
    <!--
    var img_plus = "images/plus.gif";
    var img_plus_start = "images/plus_start.gif";
    var img_plus_end = "images/plus_end.gif"
    var img_plus_start_end = "images/plus_start_end.gif";
    var img_minus = "images/minus.gif"
    var img_minus_start = "images/minus_start.gif"
    var img_minus_end = "images/minus_end.gif";
    var img_minus_start_end = "images/minus_start_end.gif"
    var img_folder_open = "images/folder_open.gif"
    var img_folder_close = "images/folder_close.gif"
    var last_id = 0;
    var menu_start = 1;
    var menu_end = 1; function showmenu(id){
    var last_topmenu, last_menu, last_img_design, last_img_folder;
    var topmenu, menu, img_design, img_folder;
    var noclose = true;
    if (last_id != 0) {
    // hide last open menu
    last_menu = document.all("menu_" + last_id);
    last_topmenu = document.all("topmenu_" + last_id);
    last_topmenu.innerHTML = "<font color=black>" + last_topmenu.innerText.replace(/ /g, "&nbsp;") + "</font>";
    if (last_menu.style.display == ""){
    last_img_design = document.all("img_design_" + last_id);
    last_img_folder = document.all("img_folder_" + last_id);
    last_menu.style.display = "none";
    if (menu_start != menu_end) { // at least two menus
    if (last_id == menu_start)
    last_img_design.src = img_plus_start;
    else if (last_id == menu_end)
    last_img_design.src = img_plus_end;
    else
    last_img_design.src = img_plus;
    } else {
    if (last_id == menu_start)
    last_img_design.src = img_plus_start_end;
    else // should never be here
    last_img_design.src = img_plus;
    }
    last_img_folder.src = img_folder_close;
    noclose = false;
    }
    }
    menu = document.all("menu_"+id);
    topmenu = document.all("topmenu_" + id);
    topmenu.innerHTML = "<font color='#012481'>" + topmenu.innerText.replace(/ /g, "&nbsp;") + "</font>";
    if (id != last_id || noclose) {
    img_design = document.all("img_design_" + id);
    img_folder = document.all("img_folder_" + id);
    menu.style.display = "";
    if (menu_start != menu_end) { // at least two menus
    if (id == menu_start)
    img_design.src = img_minus_start;
    else if (id == menu_end)
    img_design.src = img_minus_end;
    else
    img_design.src = img_minus;
    } else {
    if (id == menu_start)
    img_design.src = img_minus_start_end;
    else // should never be here
    img_design.src = img_minus;
    }
    img_folder.src = img_folder_open;
    }
    last_id=id;
    }
    -->
    </script>
    <title>菜单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><link href="../css/index.css" rel="stylesheet" type="text/css">
    </head>
    <body scroll="auto" style="MARGIN: 0px; overflow-x: hidden; overflow-y:auto" bgcolor="#ACDAFF" >
    <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="146">
      <TR> 
        <TD width="146" HEIGHT="23" nowrap BGCOLOR="#CCCCCC"> 
          <DIV ALIGN="CENTER"><FONT COLOR="#FF0000"><B>天孚律师后台管理</B></FONT></DIV>
        </TD>
      </TR>
      <TR> 
        <TD align="center"><font color="#FF0000">中文版管理</font></TD>
      </TR> 
      <TR> 
        
      </TR>     <TR> 
        <TD> <A HREF="javascript:showmenu(101);"> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_design_101" SRC="images/plus_start_end.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_folder_101" SRC="images/folder_close.gif"><SPAN ID="topmenu_101"><FONT COLOR="black"></FONT></SPAN></A>目录1</TD>
      </TR>
      <TR STYLE="display:none;" ID="menu_101"> 
        <TD>      <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_vertline.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/line_tri.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11"><A HREF="#" TARGET="frmRight">11</A><BR>
        <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_vertline.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_end.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11"><A HREF="#" TARGET="frmRight">12</A>    </TD>
      </TR> 
        <%end if%>
        <TR> 
        <TD> <A HREF="javascript:showmenu(103);"> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_design_103" SRC="images/plus_start_end.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_folder_103" SRC="images/folder_close.gif"><SPAN ID="topmenu_103"><FONT COLOR="black"></FONT></SPAN></A>目录2</TD>
      </TR>
      <TR STYLE="display:none;" ID="menu_103"> 
        <TD>    <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_vertline.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_end.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11">21</TD>
      </TR>   <TR> 
        <TD> <A HREF="javascript:showmenu(102);"> <IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_design_102" SRC="images/plus_end.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" ID="img_folder_102" SRC="images/folder_close.gif"><SPAN ID="topmenu_102"><FONT COLOR="black"></FONT></SPAN></A>系统管理</TD>
      </TR>
      <TR STYLE="display:none;" ID="menu_102"> 
        <TD height="37"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/line_blank.gif"><IMG ALIGN="absMiddle" BORDER="0" HEIGHT="20" WIDTH="19" SRC="images/tree_end.gif"><IMG SRC="images/reddot.gif" WIDTH="6" HEIGHT="11"><a href="exit.asp">退出系统</a></TD>
      </TR>  
    </TABLE>
    </html>
      

  2.   

    danis_cn(宇宙鸟) ,你好，我按你的做了，没有问题。可是如果换成从数据库里读出来的信息时，点击根目录老是点不开，而且出现提示错误，提示显示：innerText为空或不是对象。不知道是怎么回事，好郁闷。
      

  3.   

    innerText......
    这个东西是ie only的