想找一个js代码:要求是一级类别默认展开,二级默认隐藏。
有知道的朋友帮个忙,急用,谢谢

解决方案 »

  1.   

    不知这个合要求不<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>标题页</title>
    <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 arrange() {
        nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
        for (i=firstInd+1; i<document.layers.length; i++) {
            whichele = document.layers[i];
            if (whichele.visibility != "hide") {
                whichele.pageY = nextY;
                nextY += whichele.document.height;
            }
        }
    }
    //初始化菜单
    function initIt(){
        if (!ver4) return;
        if (NS4) {
            for (i=0; i<document.layers.length; i++) {
                whichele = document.layers[i];
                if (whichele.id.indexOf("Child") != -1) whichele.visibility = "hide";
           }
            arrange();
        }
        else {
            divColl = document.all.tags("DIV");
            for (i=0; i<divColl.length; i++) {
                whichele = divColl(i);
                if (whichele.className == "child") whichele.style.display = "none";
            }
        }
    }
    //展开菜单的方法
    function expandIt(ele) {
        if (!ver4) return;
        if (IE4) {
            whichele = eval(ele + "Child");
            if (whichele.style.display == "none") {
                whichele.style.display = "block";
            }
            else {
                whichele.style.display = "none";
            }
        }
        else {
            whichele = eval("document." + ele + "Child");
            if (whichele.visibility == "hide") {
                whichele.visibility = "show";
            }
            else {
                whichele.visibility = "hide";
            }
            arrange();
        }
    }
    onload = initIt;
    </script>
    </head>
    <body>
          <div id="menuParent" class="parent">    <a href="#" onClick="expandIt('menu'); return false" >父菜单一</a></div>
          <div id="menuChild" class="child">     <a href="#" target="_blank" >子菜单一</a><br>
                 <a href="#" target="_blank" >子菜单二</a><br>
                 <a href="#" target="_blank" >子菜单三</a></div>
          <div id="Menu2Parent" class="parent">    <a href="#" onClick="expandIt('Menu2'); return false" >父菜单二</a></div>
          <div id="Menu2Child" class="child">     <a href="#" target="_blank" >子菜单一</a><br>
                 <a href="#" target="_blank" >子菜单二</a><br>
                 <a href="#" target="_blank" >子菜单三</a></div>
          <div id="Menu3Parent" class="parent">    <a href="#" onClick="expandIt('Menu3'); return false" >父菜单三</a></div>
          <div id="Menu3Child" class="child">      <a href="#" target="_blank" >子菜单一</a><br>
                 <a href="#" target="_blank" >子菜单二</a><br>
                 <a href="#" target="_blank" >子菜单三</a></div>
    </body>
    </html>
      

  2.   

    已经找到解决方法了。不知网上那位大侠写的,放到下面,需要的同行自行取用。谢谢不知名的大大的代码<style type="text/css"><!--
    .pnode { white-space:nowrap;}
    .cnode { white-space:nowrap;color:#000;}
    .RootTree {
    padding:0px;
    font-size:12px;
    font-family:"宋体";
    text-align:left;
    width:120px;
    margin:0 auto;
    height:100%; 
    color:#000000;
    }
    .RootTree a {padding:2px 1px 3px 1px; color:#000000;text-decoration:none;}
    .RootTree a:hover {color:#d2c29a;  }
    .RootTree a:active {color:#000000;}
    -->
    </style><script language="javascript">var Prealink=-1,Pcollapse=0;
    var iconblank="http://p1.images22.51img1.com/6000/milesj/184bce4d78b4b472a46ceefa39af2a21.gif";
    var iconcollapse="/data/upload/remote/20090826/1606350.gif";
    var iconexpand="/data/upload/remote/20090826/zjj19810518.gif";
    var iconaccout="http://pc.images22.51img1.com/6000/milesj/c733f2f267328460163dc14bcfb31bf7.gif";
    var iconfolder="http://pa.images22.51img1.com/6000/milesj/abafcbc910b1f38dae08c534c274a7af.gif";
    var iconfolderopen="http://pc.images22.51img1.com/6000/milesj/c8d7380a13237d65ee1fbfe68fba28a8.gif";
    //-------------------- 左侧目录树js部分 ---------------
    function TreeExpand(eimg) {//--树的展开-与收起+
    if (eimg.alt=="+") {
    eimg.alt="-";
    eimg.src=iconexpand;
    eimg.parentNode.parentNode.getElementsByTagName("span")[0].style.display="block";
    }
    else {
    eimg.alt="+";
    eimg.src=iconcollapse;
    eimg.parentNode.parentNode.getElementsByTagName("span")[0].style.display="none";
    var Curalink=eimg.parentNode.getElementsByTagName("a")[0]
    if (Prealink == -1 || Prealink == Curalink) {return;}
    var parentTree,CurTree;//--以下,折叠位置是原聚焦节点的父节点,则触发父节点的点击
    parentTree=Prealink.parentNode.parentNode;
    CurTree=eimg.parentNode.parentNode;
    while(parentTree.className == "ChildTree" || parentTree.className == "RootTree"){
    if(CurTree == parentTree){
    Pcollapse=1;
    imgFolder(eimg);
    break;}
    parentTree=parentTree.parentNode.parentNode;
    }
    }//endelse
    }
    function imgFolder(fimg) {//--目录的点击 即是触发链接A
    var alink=fimg.parentNode.getElementsByTagName("a")[0]
    alink.focus();
    //open (alink.href, alink.target ?alink.target : '_blank');   //--模拟a.click()方法以兼容firefox
    if(alink.name == "accountlink") aFolder(alink,0);
    else aFolder(alink,1);
    }
    function aFolder(fa,i) {//--链接的点击-目录打开及展开子树 根i=0 子i=1
    var expandimg=fa.parentNode.getElementsByTagName("img")[0];
    //--前节点目录图标关闭
    if(Prealink != -1 && Prealink.name != "accountlink")
    {Prealink.parentNode.getElementsByTagName("img")[1].src=iconfolder;}
    //--当前节点目录图标打开;根i=0,子i=1
    if(i) 
    {fa.parentNode.getElementsByTagName("img")[1].src=iconfolderopen;}
    //--目录树的展开
    if(Pcollapse==0 && expandimg.alt=="+"){
    var expandimg=fa.parentNode.getElementsByTagName("img")[0];
    expandimg.alt="-";
    expandimg.src=iconexpand;
    fa.parentNode.parentNode.getElementsByTagName("span")[0].style.display="block";
    }
    else {Pcollapse=0;}
    Prealink=fa;
    }</script>
      

  3.   

    以下是html代码<div class="RootTree">

    <div class="pnode">
    <img onclick="TreeExpand(this)" alt="-" src="data/images/main/zjj19810518.gif" align="absMiddle" name="expandimg" /> 
    <img height="20" src="data/images/main/myxgcp.jpg" width="56" />
     </div>
     <span class="treespan" style="DISPLAY:block; MARGIN-LEFT: 19px"><!-----child tree s---
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img onclick="TreeExpand(this)" alt="+" src="/data/upload/remote/20090826/1606350.gif" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="index.php?id=347" target="_blank" title="Garments">Garments</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"><!-----child tree s---
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="index.php?id=358" target="_blank" title="Men's Apparel">Men's Apparel</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="product.php?classid=16" target="_blank" title="Women's Apparel">Women's Apparel</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Underwear & Swimwear">Underwear... </a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Kids' Wear">Kids' Wear</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Sports and Casual Wear">Sports...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->

    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc2.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Other Wear">Other Wear</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    </span></div><!--child tree one end
    -->
    <!-----child tree s---
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img onclick="TreeExpand(this)" alt="+" src="/data/upload/remote/20090826/1606350.gif" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Fashion Accessories and Fittings">Fashion Acc...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"><!-----child tree s---
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Socks">Socks</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Caps">Caps</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Scarves">Scarves</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Gloves">Gloves</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc2.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Other Fashion Accessories and Fittings">Other Fash...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    </span></div><!--child tree 2end
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img onclick="TreeExpand(this)" alt="+" src="/data/upload/remote/20090826/1606350.gif" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Home Textiles">Home Text...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"><!-----child tree s---
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Bedroom Textiles">Bedroom...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Curtains">Curtains</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Table Textiles">Table...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Bath Towels">Bath...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Blankets">Blankets</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc2.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Drawnwork Products">Drawnwork...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    </span></div><!--child tree  3end
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img onclick="TreeExpand(this)" alt="+" src="/data/upload/remote/20090826/1606350.gif" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Textile Raw Materials and Fabrics">Textile...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"><!-----child tree s---
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Yarns">Yarns</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Cotton & Polyester Greige Cloth">Cotton...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Cotton & Polyester">Cotton...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Cotton & Polyester Printing Cloth">Cotton...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Flaxen Cloth">Flaxen Cloth</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
      

  4.   

    继续贴完<div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Chemical Fabric">Chemical...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Wool,Animal Fabric">Wool...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Silk Fabric">Silk...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->

    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc2.jpg" align="absMiddle" name="expandimg" />
    <a onclick="aFolder(this,1)" href="#" target="_blank" title="Non-woven Fabric">Non-woven...</a>
      </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    </span></div><!--child tree 4end
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img onclick="TreeExpand(this)" alt="+" src="/data/upload/remote/20090826/1606350.gif" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title=" Other Textile Products"> Other...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"><div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Other Textile Raw Materials and Fabrics">Other...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc2.jpg" align="absMiddle" name="expandimg" />
    <a onclick="aFolder(this,1)" href="#" target="_blank" title="Carpets & Tapestries">Carpets...</a>
      </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <!-----child tree s---
    -->
    </span></div><!--child tree 5end
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img onclick="TreeExpand(this)" alt="+" src="/data/upload/remote/20090826/1606350.gif" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Furs,Leather,Downs & Related Products">Furs...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"><!-----child tree s---
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Fur & Fur Products">Fur &...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->
    <div class="ChildTree">

    <div class="cnode">
    <img src="data/images/main/leftzc.jpg" align="absMiddle" name="expandimg" /> <a onclick="aFolder(this,1)" href="#" target="_blank" title="Leather & Leather Products">Leather...</a> </div><span class="treespan" style="DISPLAY: none; MARGIN-LEFT: 19px"></span></div><!--child tree e
    -->