• 2007-09-11

    无限级树型菜单(非递归)(修订版)(兼容ie&ff) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/8234891.html

    今天讲到多级菜单,发现上次的例子有bug,子节点在挂接前应该先按id排序,以确定正确的兄弟次序。
    采用sort的自定义排序法,实现字符串和其后数字的自然排序,类似于php的natsort()。
    呵呵,还是php的函数库强大啊。修订版代码存档。

    <s c r i p t>
    function showit(obj)
    {
    for(i=0;i<obj.parentNode.childNodes.length;i++)
    if(obj.parentNode.childNodes[i]!=obj)
    obj.parentNode.childNodes[i].style.display=obj.parentNode.childNodes[i].style.display=="block"?"none":"block";
    }
    mydata="p9,menu2221,p7;p11,menu212,p5;p7,menu221,p6;p10,menu211,p5;p8,menu111,p4;p1,menu1,0;p5,menu21,p2;p2,menu2,0;p6,menu22,p2;p4,menu11,p1;p3,menu3,0";
    myarr=new Array();
    for(i=0;i<mydata.split(";").length;i++)
    {
    myarr[i]=new Array();
    myarr[i][0]=mydata.split(";")[i].split(",")[0];
    myarr[i][1]=mydata.split(";")[i].split(",")[1];
    myarr[i][2]=mydata.split(";")[i].split(",")[2];
    thisid=myarr[i][0];
    thistext=myarr[i][1];
    document.write("<div id='"+thisid+"'><span style='cursor:default' onclick=showit(this)>"+thistext+"</span></div>");
    }
    myarr.sort(function(a,b){return a[0].substring(1)-b[0].substring(1);});
    for(i=0;i<myarr.length;i++)
    {
    thisid=myarr[i][0];
    parentid=myarr[i][2];
    if(parentid!=0)
    {
    document.getElementById(thisid).style.margin='10px';
    document.getElementById(thisid).style.display='none';
    document.getElementById(parentid).appendChild(document.getElementById(thisid));
    document.getElementById(parentid).firstChild.style.cursor='pointer';
    }
    }
    </s c r i p t>

    分享到: