100分求javascript 实现树形列表

求一个简单的javascript实现树形列表的例子，谢谢

解决方案 »

  1.   

    <!--
    这个导航树是在CSDN网友“meizz”提供的MzTreeView1.0基础上修改而来。
    MzTreeView1.0 可以在 http://www.meizz.com/Web/Article/211/436.htm 获得。
    //-->
    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=gb2312">
        <meta http-equiv="pragma" content="no-cache">
        <meta content="f.r.huang(meizz梅花雪)//www.meizz.com" name="author">
        <script language="javascript" src="/tree/mztreeview10.js"></script>
        <script language="javascript" src="/tree/TreeNodeData/begin.js"></script>
        <script language="javascript"">
        <!--
        function dodo()
        {
            ExpandNode('1_9009');
            ExpandNode('9009_53');
        }
        
        function ExpandNode(iid)
        {
            if( document.body.readyState != "complete" )
            {
                setTimeout("ExpandNode('"+iid+"')",2);
                return;
            }
            var i = 0;
            if(tree.nodes[iid])
            {
                i = tree.nodes[iid];
                if(i > 0)
                {
                    tree.expand(i,true);
                    tree.focus(i);
                }
            }
            else
            {
                setTimeout("ExpandNode('"+iid+"')",10);
                return;
            }
        }
        //-->
        </script>    <title>CSDN树型菜单测试</title>
        <style>
        A:LINK, A:VISITED, A:ACTIVE, A:HOVER
        {
          color: #000000;
          font-size: 13px;
          padding-left: 3px;
          TEXT-DECORATION: NONE;
          font-family: Tahoma,Verdana,宋体,Fixedsys;
        }
        SPAN
        {
          font-family: Tahoma,Verdana,宋体,Fixedsys;
        }
        
        
        </style>
    </head>
    <body text="#000000" vlink="#5493b4" link="#003fb7" bgcolor="#e5e5e5">
        <div id="treeviewarea">
        </div>    <script language="javascript">
        <!--
        var tree = new MzTreeView("tree");
        tree.setIconPath("/Tree/TreeImages/");
        tree.url = "/Expert/ForumList.asp?typenum=1";
        tree.target = "ContentFrame";
        tree.nodeFilePath = "/Tree/TreeNodeData/";
        InitShowTreeInfo(tree);
        document.getElementById('treeviewarea').innerHTML = tree.toString();
        //-->
        </script></body>
    </html>
        <script language="javascript" src="/tree/mztreeview10.js"></script>
        <script language="javascript" src="/tree/TreeNodeData/begin.js"></script>
    自己看
      

  2.   

    这个还需要在这里求？随便找个网站，右键->查看源文件，多得数不清！
    现成的就有，CSDN左边那个框架上。
      

  3.   

    推荐一个叫做 xloadtree 的js库。在google查一下就能找到。
      

  4.   

    MeizzTreeView1.0，一次加载，异步显示。觉得比较好用。
      

  5.   

    我的小树：
    <html><head>
    <title>无限级树形菜单</title>
    <style>
    #A1 td { vertical-align: top; }
    #A1 td.bj { font-family: Wingdings; color: #FF9933; text-align: center; }
    #A1 td.bj , #A1 td.kg { width: 24; }
    #A1 a:link , #A1 a: visited  { color: #cc0080; text-decoration: none; }
    #A1 a:hover { color: #0ff080; text-decoration: none; }
    </style><script language="JavaScript">function m_start(name,tt)    //菜单组开始
    {
      document.writeln('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>');
      document.writeln('<td><a href="#" onclick="zgmm()">'+name+'</a></td>');
      document.writeln('</tr>');
      document.writeln('<tr style="display: '+(tt==1?'block':'none')+';">');
      document.writeln('<td class="bj"> </td>');
      document.writeln('<td>');
      document.writeln('<table border="0" cellpadding="0" cellspacing="0">');
    }function m_end()    //菜单组结束
    {
      document.writeln('</table></td></tr>');
    }function add_Sub(name,url,kj)    //添加菜单项
    {
      document.writeln('<tr><td class="bj">2</td><td>');
      document.writeln('<a target="'+kj+'" href="'+url+'">'+name+'</a>');
      document.writeln('</td></tr>');
    }function zgmm()
    {
    //当前发生事件的对象的父对象的上一个兄弟对象
      var ero = event.srcElement.parentElement.previousSibling;
    //当前发生事件的对象的父对象的父对象的下一个兄弟对象
      var mo = event.srcElement.parentElement.parentElement.nextSibling;
      mo.style.display = (mo.style.display=="none")?"block":"none";
      ero.innerHTML = (mo.style.display=="none")?"0":"1";
    }
    </script>
    </head><body><table border="0" cellpadding="0" cellspacing="0" width="100%" id="A1">
    <script language="JavaScript">
    //   说明：
    //   菜单组开始，m_start(name,tt); name为菜单组名称，tt为1菜单组初始时展开，为0不展开
    //   菜单组结束：m_end();
    //   添加菜单项：add_Sub("菜单项名称","url地址","框架名");
    m_start("1",1);
    m_start("1.1",1);
      m_start("1.1.1",0);
        add_Sub("1.1.1.1","#","_blank");
        add_Sub("1.1.1.2","#","_blank");
        add_Sub("1.1.1.3","#","_blank");
      m_end();
      m_start("1.1.2",0);
        add_Sub("1.1.2.1","#","_blank");
        add_Sub("1.1.2.2","#","_blank");
        add_Sub("1.1.2.3","#","_blank");
      m_end();
        m_start("1.1.3",0);
        add_Sub("1.1.3.1","#","_blank");
        add_Sub("1.1.3.2","#","_blank");
        add_Sub("1.1.3.3","#","_blank");
      m_end();
      add_Sub("1.1.4","#","_blank");
      add_Sub("1.1.5","#","_blank");
      add_Sub("1.1.6","#","_blank");
    m_end();
    m_start("1.2",0);
      add_Sub("1.2.1","#","_blank");
      add_Sub("1.2.2","#","_blank");
      add_Sub("1.2.3","#","_blank");
    m_end();
    m_start("1.3",0);
      add_Sub("1.3.1","#","_blank");
      add_Sub("1.3.2","#","_blank");
      add_Sub("1.3.3","#","_blank");
    m_end();
    add_Sub("1.4","#","_blank");
    add_Sub("1.5","#","_blank");
    m_end();
    </script>
    </table></body></html>
      

  6.   


    这段程序放在<body>与</body>之间
    <script language="JavaScript">
    NS4 = (document.layers) ? 1 : 0;
    IE4 = (document.all) ? 1 : 0;
    ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) {
        with (document) {
            write("<STYLE TYPE="text/css">");
            if (NS4) {
                write(".parent {position:absolute; visibility:visible}");
                write(".child {position:absolute; visibility:visible}");
                write(".regular {position:absolute; visibility:visible}")
            }
            else {
                write(".child {display:none}")
            }
            write("</STYLE>");
        }
    }function getIndex(el) {
        ind = null;
        for (i=0; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.id == el) {
                ind = i;
                break;
            }
        }
        return ind;
    }function arrange() {
        nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
        for (i=firstInd+1; i<document.layers.length; i++) {
            whichEl = document.layers[i];
            if (whichEl.visibility != "hide") {
                whichEl.pageY = nextY;
                nextY += whichEl.document.height;
            }
        }
    }function initIt(){
        if (!ver4) return;
        if (NS4) {
            for (i=0; i<document.layers.length; i++) {
                whichEl = document.layers[i];
                if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
           }
            arrange();
        }
        else {
            divColl = document.all.tags("DIV");
            for (i=0; i<divColl.length; i++) {
                whichEl = divColl(i);
                if (whichEl.className == "child") whichEl.style.display = "none";
            }
        }
    }function expandIt(el) {
        if (!ver4) return;
        if (IE4) {
            whichEl = eval(el + "Child");
            if (whichEl.style.display == "none") {
                whichEl.style.display = "block";
            }
            else {
                whichEl.style.display = "none";
            }
        }
        else {
            whichEl = eval("document." + el + "Child");
            if (whichEl.visibility == "hide") {
                whichEl.visibility = "show";
            }
            else {
                whichEl.visibility = "hide";
            }
            arrange();
        }
    }
    onload = initIt;
    </script>
            </font></p>
          <div id="KB1Parent" class="parent">　　　　<a href="#" onClick="expandIt("KB1"); return false" ><img src="img/plus.gif" border=0>文件夹一</a></div>
          <div id="KB1Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面一</a><br>
            　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面二</a><br>
            　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面三</a></div>
          <div id="KB2Parent" class="parent">　　　　<a href="#" onClick="expandIt("KB2"); return false" ><img src="img/plus.gif" border=0>文件夹二</a></div>
          <div id="KB2Child" class="child">　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面一</a><br>
            　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面二</a><br>
            　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt="" width="15" height="11"><img src="img/open.gif"  border=0>页面三</a></div>
          <div id="KB3Parent" class="parent">　　　　<a href="#" onClick="expandIt("KB3"); return false" ><img src="img/plus.gif"  border=0>文件夹三</a></div>
          <div id="KB3Child" class="child"> 　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面一</a><br>
            　　　　　　<a href="sample.htm" target="_blank" ><img src="img/open.gif"  border=0>页面二</a><br>
            　　　　　<a href="sample.htm" target="_blank" ><img src="img/spacer.gif"  border=0 alt=""><img src="img/open.gif"  border=0>页面三</a></div>
          <script language="JavaScript">
    if (NS4) {
            firstEl = "KB1Parent";
            firstInd = getIndex(firstEl);
            arrange();
    }
    </script>