请高手指教一下，这个页面右侧的菜单是如何实现的？

应该是基于table做的收起的部分为tr的style.display属性为"none",只不过目录树结构有个算法,比较难搞。

解决方案 »

  1.   

    看<script>...</script>就知道了
      

  2.   

    给你个我做的吧。与大家共勉吧：
    注意<tr>中的属性设定，有leaf的为叶，还有个layer为层级，最好研磨以下函数，即目录树算法：---tree.htm------------------------------------------------------
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>功能树</title>
        <link type = "text/css" rel = "stylesheet" href = "common/tree.css">
      </head>
      <body topmargin="0" leftmargin="0" bgcolor="#A0E4D3">
        <div style="position:absolute;top:2px;left:100px;padding:4px"><font class="menueon"><a href="#" class="link" onclick="chanAllTree(tableboxmain,0)">展开</a> | <a href="#" class="link" onclick="chanAllTree(tableboxmain,1)">收起</a></font></div>    <table id = "tableboxmain" cellSpacing = "0" cellpadding="1" width="100%" border="0">
          <tr layer="0">
            <td>
              <font class="menueon">测试树</font>
            </td>
          </tr>
          <tr layer="1">
            <td>&nbsp;
              <a class="menueon" onclick="javascript:treeSwitch(this)">[+]</a><font class="menueon">目录A</font>
            </td>
          </tr>
          <tr layer="2">
            <td>&nbsp;&nbsp;&nbsp;
              <a class="menueon" onclick="javascript:treeSwitch(this)">[+]</a><font class="menueon">目录A</font>
            </td>
          </tr>
          <tr layer="3" leaf>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <font class="menueon"><img src="exe.gif" style="vertical-align:top"><a href="javaScript:donewwin('eFinance/pPrePay.html','预付货款')" class="link">预付货款</a></font>
            </td>
          </tr>
          <tr layer="2">
            <td>&nbsp;&nbsp;&nbsp;
              <a class="menueon" onclick="javascript:treeSwitch(this)">[+]</a><font class="menueon">目录A</font>
            </td>
          </tr>
          <tr layer="3" leaf>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <font class="menueon"><img src="exe.gif" style="vertical-align:top"><a href="javaScript:donewwin('eFinance/pPrePay.html','预付货款')" class="link">预付货款</a></font>
            </td>
          </tr>
          <tr layer="1" leaf>
            <td>&nbsp;
              <font class="menueon"><img src="exe.gif" style="vertical-align:top"><a href="javaScript:donewwin('eFinance/pSelAccountPay.html','应付货款付款')" class="link">应付货款付款</a></font>
            </td>
          </tr>
        </table>    <script language="JavaScript" src="common/tree.js"></script>    <script>
          chanAllTree(tableboxmain,1);
        </script>  </body>
    </html>
    --------------------------------------------------------------------------common/tree.js-----------------------------------------------------
         //列表窗口展开与收起相关函数
          function treeSwitch(startObj){
            var innerStr = new Array("[-]","[+]");  //[0],展开  [1],收起
            var status = new Array("block","none");
            var currTR = startObj.parentNode.parentNode;
            var currLayer = parseInt(currTR.layer);
            var trPos = currTR.nextSibling;
            if(trPos==null || parseInt(trPos.layer)<=currLayer) return false;        if(startObj.innerHTML==innerStr[0]){  //执行收起
              startObj.innerHTML = innerStr[1];
              while(parseInt(trPos.layer)>currLayer){
                trPos.style.display = status[1];
                trPos = trPos.nextSibling;
                if(trPos==null) return false;
              }
            }else{  //执行展开
              startObj.innerHTML = innerStr[0];
              hideTR(currTR);
              while(parseInt(trPos.layer)>currLayer){
                hideTR(trPos);
                trPos = trPos.nextSibling;
                if(trPos==null) return false;
              }
            }
          }      function hideTR(trObj){
            var status = new Array("block","none");
            var innerStr = new Array("[-]","[+]");
            var currLayer = parseInt(trObj.layer);
            var trObjDisplay = 0;        var checking = true;
            var uperLayer = currLayer-1;
            if(uperLayer<=0) return false;
            var trPos = trObj.previousSibling;
            do{
              if(parseInt(trPos.layer)==uperLayer){
                if(trPos.cells(0).all.tags("a")(0).innerHTML==innerStr[1]){
                  trObjDisplay = 1;
                  break;
                }else{
                  uperLayer--;
                }
              }
              trPos = trPos.previousSibling;
            }while(uperLayer>0);        trObj.style.display = status[trObjDisplay];
          }      function chanAllTree(tableObj,flag){ //flag=0,全展开  flag=1,全收起
            var status = new Array("block","none");
            var innerStr = new Array("[-]","[+]");  //[0],展开  [1],收起
            //最多5级层次
            var buff_i = new Array(-1,-1,-1,-1,-1,-1);
            var count = new Array(0,0,0,0,0,0);        for(var i=0 ; i<tableObj.rows.length ; i++){
              var b = parseInt(tableObj.rows(i).layer);          if(b>0) count[b-1]++;
              if(buff_i[b]!=-1){
               if(tableObj.rows(buff_i[b]).leaf==undefined) tableObj.rows(buff_i[b]).count = count[b];
                tableObj.rows(buff_i[b]).style.display = status[flag];
              }
              buff_i[b] = i;
              count[b] = 0;          for(var j=b+1 ; buff_i[j]!=-1 ; j++){
                if(tableObj.rows(buff_i[j]).leaf==undefined) tableObj.rows(buff_i[j]).count = count[j];
                tableObj.rows(buff_i[j]).style.display = status[flag];
                buff_i[j] = -1;
                count[j] = 0;
              }
            }
            for(var k=0 ; buff_i[k]!=-1 ; k++){
              if(tableObj.rows(buff_i[k]).leaf==undefined) tableObj.rows(buff_i[k]).count = count[k];
              tableObj.rows(buff_i[k]).style.display = status[flag];
            }        for(var h=0 ; h<tableObj.rows.length ; h++){
              if(tableObj.rows(h).layer=="0" || tableObj.rows(h).layer=="1") tableObj.rows(h).style.display = "block";
              if(tableObj.rows(h).layer!="0" && tableObj.rows(h).leaf==undefined){
                if(tableObj.rows(h).count>0) tableObj.rows(h).cells(0).all.tags("a")(0).innerHTML = innerStr[flag];
                if(tableObj.rows(h).count==0){
                  tableObj.rows(h).cells(0).all.tags("a")(0).className = "menueoff";
                  tableObj.rows(h).cells(0).all.tags("font")(0).className = "menueoff";
                }
              }
            }
         }     //打开窗口
         function donewwin(val1, val2){
           var sheight = screen.height-80;
           var swidth  = screen.width-15;
           window.open(val1,val2,"status=yes,resizable=yes,scrollbars=yes,left=0,top=0,width="+swidth+",height="+sheight);
         }
    --------------------------------------------------------------------------------为了好看点再加上tree.css吧
    ---------tree.css--------------------------------------------------------------
          body{cursor:default;}
          a.link {text-decoration: none; color: #333333; font-size: 12px; border:#A0E4D3 3px dotted;} 
          a.link:link {text-decoration: none; color: #333333; font-size: 12px ;border:#A0E4D3 3px dotted;} 
          a.link:active {text-decoration: none; color: #333333; font-size: 12px ;border:#A0E4D3 3px dotted;}
          a.link:hover {text-decoration: none; color: #006600; font-size: 12px ;border:#808080 1px dotted;padding-top:2px;padding-left:2px;padding-right:2px;}      .menueon {font-size:12px;color:#333333;cursor:default;border:#A0E4D3 1px dotted;}
          .menueoff {font-size:12px;color:#777777;cursor:default;border:#A0E4D3 1px dotted;}----------------------------------------------------------------------------
    另外还有叶子图标为exe.gif,与leaf.htm在同一目录下。
      

  3.   

    taxmma(好客007) ,真是好人!我已经把你的例子运行了一下,非常好!我感谢了!
    能不能再帮帮我,做一个框架结构,也就是在左边点击,然后在右边打开!只要一个页面就行,我照着学学.再次谢谢.