调用的HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页教学网无限级树型菜单演示</title>
<script src="xx.js" type="text/javascript">
//more javascript from http://www.webjx.com</script><style type="text/css"><!--#containerul, #containerul ul{
  text-align:left;
  margin:0;                /* Removes browser default margins applied to the lists. */
  padding:0;                /* Removes browser default padding applied to the lists. */
}#containerul li{
  margin:0 0 0 30px;            /* A left margin to indent the list items and give the menu a sense of structure. */
  padding:0;                /* Removes browser default padding applied to the list items. */
  list-style-type:none;            /* Removes the bullet point that usually goes next to each item in a list. */
}#containerul .symbols{            /* Various styles to position the symbols next to the items in the menu. */
  float:left;
  width:12px;
  height:1em;
  background-position:0 50%;
  background-repeat:no-repeat;
}--></style>
</head><body>
<ul id="containerul">
                <li>逸然飞扬
                    <ul>
                        <li><a href="info.asp?ID=1" target="iframe">企业文化</a></li>
                        <li><a href="info.asp?ID=2" target="iframe">企业资质</a></li>
                        <li><a href="info.asp?ID=3" target="iframe">联系方式</a></li>
                    </ul>
                </li>
                <li>产品目录
                    <ul>
                        <li>摩托罗拉<ul><li><a href='ProList.asp?ID=94' target='iframe'>TEST</a></li><li><a href='ProList.asp?ID=95' target='iframe'>11111sdfs</a></li><li><a href='ProList.asp?ID=98' target='iframe'>MTp706</a></li></ul></li>
                        <li>日本建伍<ul><li><a href='ProList.asp?ID=97' target='iframe'>小日本</a></li></ul></li>
                        <li>威泰克斯</li>
                        <li>艾可慕<ul><li><a href='ProList.asp?ID=100' target='iframe'>123124</a></li></ul></li>
                        <li>好易通<ul><li><a href='ProList.asp?ID=101' target='iframe'>asdf</a></li></ul></li>
                        <li>其他品牌</li>
                    </ul>
                </li>
                <li>配件精品
                    <ul>
                        <li><a href="ProClsPJ.asp?cls=MOTO%C5%E4%BC%FE" target="iframe">MOTO配件</a></li>
                        <li><a href="ProClsPJ.asp?cls=VERTEX%C5%E4%BC%FE" target="iframe">VERTEX配件</a></li>
                        <li><a href="ProClsPJ.asp?cls=ICOM%C5%E4%BC%FE" target="iframe">ICOM配件</a></li>
                        <li><a href="ProClsPJ.asp?cls=HYT%C5%E4%BC%FE" target="iframe">HYT配件</a></li>
                        <li><a href="ProClsPJ.asp?cls=%B3%B5%D4%D8%C5%E4%BC%FE" target="iframe">车载配件</a></li>
                    </ul>
                </li>
                <li>技术支持
                    <ul>
                        <li>写频软件
                            <ul>
                                <li>摩托罗拉<ul><li><a href='XpSoftDown.asp?ID=4&HK_ClassTitle=TEST' target='iframe'>TEST</a></li><li><a href='XpSoftDown.asp?ID=4&HK_ClassTitle=11111sdfs' target='iframe'>11111sdfs</a></li><li><a href='XpSoftDown.asp?ID=4&HK_ClassTitle=MTp706' target='iframe'>MTp706</a></li></ul></li>
                                <li>日本建伍<ul><li><a href='XpSoftDown.asp?ID=4&HK_ClassTitle=小日本' target='iframe'>小日本</a></li></ul></li>
                                <li>威泰克斯</li>
                                <li>艾可慕<ul><li><a href='XpSoftDown.asp?ID=4&HK_ClassTitle=123124' target='iframe'>123124</a></li></ul></li>
                                <li>好易通<ul><li><a href='XpSoftDown.asp?ID=4&HK_ClassTitle=asdf' target='iframe'>asdf</a></li></ul></li>
                                <li>其他品牌</li>
                            </ul>
                        </li>
                        <li><a href="info.asp?ID=3" target="iframe">技术支持</a></li>
                        <li>维修手册
                            <ul>
                                <li>摩托罗拉<ul><li><a href='XpSoftDown.asp?ID=5&HK_ClassTitle=TEST' target='iframe'>TEST</a></li><li><a href='XpSoftDown.asp?ID=5&HK_ClassTitle=11111sdfs' target='iframe'>11111sdfs</a></li><li><a href='XpSoftDown.asp?ID=5&HK_ClassTitle=MTp706' target='iframe'>MTp706</a></li></ul></li>
                                <li>日本建伍<ul><li><a href='XpSoftDown.asp?ID=5&HK_ClassTitle=小日本' target='iframe'>小日本</a></li></ul></li>
                                <li>威泰克斯</li>
                                <li>艾可慕<ul><li><a href='XpSoftDown.asp?ID=5&HK_ClassTitle=123124' target='iframe'>123124</a></li></ul></li>
                                <li>好易通<ul><li><a href='XpSoftDown.asp?ID=5&HK_ClassTitle=asdf' target='iframe'>asdf</a></li></ul></li>
                                <li>其他品牌</li>
                            </ul>
                        </li>
                        <li>信号覆盖方案
                            <ul>
                                <li>摩托罗拉<ul><li><a href='XpSoftDown.asp?ID=6&HK_ClassTitle=TEST' target='iframe'>TEST</a></li><li><a href='XpSoftDown.asp?ID=6&HK_ClassTitle=11111sdfs' target='iframe'>11111sdfs</a></li><li><a href='XpSoftDown.asp?ID=6&HK_ClassTitle=MTp706' target='iframe'>MTp706</a></li></ul></li>
                                <li>日本建伍<ul><li><a href='XpSoftDown.asp?ID=6&HK_ClassTitle=小日本' target='iframe'>小日本</a></li></ul></li>
                                <li>威泰克斯</li>
                                <li>艾可慕<ul><li><a href='XpSoftDown.asp?ID=6&HK_ClassTitle=123124' target='iframe'>123124</a></li></ul></li>
                                <li>好易通<ul><li><a href='XpSoftDown.asp?ID=6&HK_ClassTitle=asdf' target='iframe'>asdf</a></li></ul></li>
                                <li>其他品牌</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>英才招聘
                        <ul><li><a href='JobView.asp?JobID=1' target='iframe'>销售人才</a><li><a href='JobView.asp?JobID=2' target='iframe'>技术人才</a><li><a href='JobView.asp?JobID=3' target='iframe'>售后人才</a><li><a href='JobView.asp?JobID=22' target='iframe'>客服人员</a></ul>
                </li>
            </ul><p>
  <script type="text/javascript">
initiate();        // This must be placed immediately after the menu in order to format it properly.
</script>
</p>
<h3>树形菜单</h3>
<p>说明:一个很容易制作树形菜单,你可以无限级的添加下级菜单,菜单是通过列表方式写成的 </p>
</body>
</html>

解决方案 »

  1.   


    function setCookie(name,value) {
        var Days = 1;
        var exp  = new Date();
        exp.setTime(exp.getTime() + Days*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }function getCookie(name) {
        var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
        if(arr=document.cookie.match(reg)) return unescape(arr[2]);
        else return null;
    }//function deleteCookie(name) {
    //  document.cookie = name+"=;expires="+(new Date(0)).toGMTString();
    //}
    //在首页上点击某个链接之后,触发一js事件,js将改链接报错到某一cookie中之后,再跳转页面,
    //然后在新打开页面根据cookie判断需要展开的内容,具体代码你自己写吧
      

  2.   

    不需要用COOKIE,很简单的做法,因为你是点击传递过来的
    完全可以通过参数来初始化展开菜单
      

  3.   

    chinmo 
    你能不能跟我说下那一大段js里面哪一块是控制展开菜单的吗?
    比如说,我给它哪个值,它就展开响应的哪个菜单。
    谢谢指点
      

  4.   

    Menu.Js:
    -------------------------var temp, temp2, cookieArray, cookieArray2, cookieCount;//添加string的原型
    String.prototype.trim=function(){
      return this.replace(/^\s*|\s*$/g,"");
    }
    function HiddenBrother(el){
      var o=el,ul;
      //隐藏同级向上的菜单
      while(o=o.previousSibling)
         if(o.nodeType==1){
           ul=o.getElementsByTagName("ul");
           if(ul.length>0){
             o.firstChild.style.backgroundImage="url(tree/plus.png)";
             for(var i=0;i<ul.length;i++)ul[i].style.display="none";
           }
         }  
      //隐藏同级向下的菜单
      o=el;
      while(o=o.nextSibling)
         if(o.nodeType==1){ 
           ul=o.getElementsByTagName("ul");
           if(ul.length>0){
             o.firstChild.style.backgroundImage="url(tree/plus.png)";
             for(var i=0;i<ul.length;i++)ul[i].style.display="none";
           }
         } 
    }//=============================修改过这里,上面的新添加的
    function initiate(){  cookieCount=0;  if(document.cookie){    cookieArray=document.cookie.split(";");
        cookieArray2=new Array();    for(i in cookieArray){
          cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
        }  }  cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();  temp=document.getElementById("containerul");
      
      for(var o=0;o<temp.getElementsByTagName("li").length;o++){
        if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
        //=============================================================================================================================
          //替换文字为span并且加上事件
          wordSpan=document.createElement("span");
          word=temp.getElementsByTagName("li")[o].firstChild.nodeValue.trim();
          wordSpan.innerHTML=word;
          //删除文字
          temp.getElementsByTagName("li")[o].innerHTML=temp.getElementsByTagName("li")[o].innerHTML.replace(word,"");
          wordSpan.onclick=function(){
            showhide(this.parentNode);
            writeCookie();
            HiddenBrother(this.parentNode);//隐藏同级菜单//==========================================================================
          }
          
          temp.getElementsByTagName("li")[o].insertBefore(wordSpan,temp.getElementsByTagName("li")[o].firstChild)
          //=================================================================================================================================
          temp2                = document.createElement("span");
          temp2.className            = "symbols";
          temp2.style.backgroundImage    = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(tree/minus.png)":"url(tree/plus.png)"):"url(tree/plus.png)";
          temp2.onclick=function(){
            showhide(this.parentNode);
            writeCookie();
            HiddenBrother(this.parentNode);//隐藏同级菜单//==========================================================================
          }      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)      temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";      if(cookieArray[cookieCount]=="true"){
            showhide(temp.getElementsByTagName("li")[o]);
          }      cookieCount++;    }
        else{      temp2                = document.createElement("span");
          temp2.className            = "symbols";
          temp2.style.backgroundImage    = "url(tree/page.png)";      temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);    }
      }
    }function showhide(el){  el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";  el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(tree/minus.png)":"url(tree/plus.png)";}function writeCookie(){        // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.  cookieArray=new Array()  for(var q=0;q<temp.getElementsByTagName("li").length;q++){    if(temp.getElementsByTagName("li")[q].childNodes.length>0){
          if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){        cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");      }
        }  }  document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();}// Add by jasson
    function expandMenu( title )
    {
    temp=document.getElementById("containerul");
    for( var i=0; i<temp.children.length;i++)
    {
        var curLi = temp.children[i];
        if( curLi.children.length > 1 )
        {
         var curTitle = curLi.children[1].innerText
         if( curTitle == title )
         {
            curLi.getElementsByTagName("ul")[0].style.display="block";
       curLi.getElementsByTagName("span")[0].style.backgroundImage=url(tree/minus.png);
       HiddenBrother( curLi )
         }
        }
    }
       }
    ----------------------------------------------------
    HTML:<script type="text/javascript">
              initiate();        // This must be placed immediately after the menu in order to format it properly.
              expandMenu( "产品目录");
    </script>-------------------------------------------------
    好像主页通过Url传入了所选择的项的title值,将这个值作为参数放到expandMenu( ) 里即可。
      

  5.   

    <script type="text/javascript"> 
              initiate();        // This must be placed immediately after the menu in order to format it properly. 
              expandMenu( "产品目录"); 
    </script> 但没发现他的文档里有expandMenu( "产品目录"); 这个,奇怪的是他是怎么默认打开的配件精品和英才招聘
      

  6.   

    不好意思,代码写错了点:// Add by jasson
    function expandMenu( title )
    {
    temp=document.getElementById("containerul");
    for( var i=0; i<temp.children.length;i++)
    {
        var curLi = temp.children[i];
        if( curLi.children.length > 1 )
        {
         var curTitle = curLi.children[1].innerText
         if( curTitle == title )
         {
            curLi.getElementsByTagName("ul")[0].style.display="block";        
       curLi.getElementsByTagName("span")[0].style.backgroundImage="url(tree/minus.png)";
       HiddenBrother( curLi )
         }
        }
    }
    }