求助，树型展开菜单问题

请先看一上演示，问题我都写在上面了http://www.websjy.com/club/html/html.html展开后，高度上有问题。谢谢

解决方案 »

  1.   

    它的JS是判断“li” JS中的代码是：allhight=obj.getElementsByTagName("li").length*26;//26为每个菜单项的高度，用来计算二级菜单的总高度。的
      

  2.   

    menu_left.jsfunction getElementsByClassName(searchClass, node,tag){  
    if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}
    else{        
    node = node || document;        
    tag = tag || "*";        
    var classes = searchClass.split(" "),        
    elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),        
    patterns = [],         
    returnElements = [],        
    current,         
    match;        
    var i = classes.length;       
    while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}        
    var j = elements.length;       
    while(--j >= 0){            
    current = elements[j];           
    match = false;            
    for(var k=0, kl=patterns.length; k<kl; k++){                
    match = patterns[k].test(current.className);                
    if (!match)  break;           
    } 
    if (match)  returnElements.push(current);        
    }        
    return returnElements;   
    } 
    }/*通用加载函数，页面中如果要用到onload函数在窗体一加载时就执行的代码，可以直接添加到这个函数，否则会引起多个onload函数的执行冲稿
      带参数的调用方法：addLoadEvent(new Function("refurFrame('单词管理');"));
    */
    function addLoadEvent(func){
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
    window.onload=func;
    }
    else{
    window.onload=function(){
    oldonload();
    func();
    }
    }
    }/*判断是否有className的函数，调用例子为：o.className=o.addClass(o,"normal");*/
    function hasClass(element, className) {  
    var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');     
    return element.className.match(reg); 
    } 
    /*动态添加className的函数，调用例子为：addClass(document.getElementById("test"), "test");*/
    function addClass(element, className) {  
    if (!this.hasClass(element, className)){   
    element.className += " "+className;/*如果有多个样式叠加，则用这种方式，如class="style1 style2"*/
    /*element.className = className; */ 
    } 
    }  
    /*动态删除className的函数，调用例子为：removeClass(document.getElementById("test"), "test") */
    function removeClass(element, className) {     
    if (hasClass(element, className)){ 
    var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');         
    element.className = element.className.replace(reg,' ');     
    } 
    } 
    /*获取第一个子节点的函数，兼容FF*/
    function getFirstChild(obj){
    var firstDIV;
    for (i=0; i<obj.childNodes.length; i++){
    if (obj.childNodes[i].nodeType==1){
    firstDIV=obj.childNodes[i];
    return firstDIV;
    }
    else 
    continue;
    }
    }addLoadEvent(new Function("hovermenu('level1','level2','hove','cur');"));
    //menu代表菜单总的ID名称
    //level1代表一级菜单项的父容器，level2代表二级菜单项的父容器，
    //后面的三个参数style1,style2,style3分别代表鼠标移入，移出，点击的三态样式名
    addLoadEvent(new Function("submenu('level2','hove1','hove1');"));/*滑动显隐菜单列表*/
    var temp;
    var temp1;
    function hovermenu(cssName1,cssName2,style2,style3){ 
        var ArrLinks=getElementsByClassName(cssName1);//一级菜单父容器的数繿
    var ArrLevel = new Array();//第一级菜单的数组
    for(var i=0;i<ArrLinks.length;i++){
    var curobj= getFirstChild(ArrLinks[i]);//获得第一个子对象     
    ArrLevel.push(curobj);
    }
        var ArrDivs=getElementsByClassName(cssName2);//二级菜单的父容器数组，要显示的二级菜单容嗿
        for(var i=0;i<ArrLinks.length;i++){        
            var obj=getFirstChild(ArrLinks[i]);//获得第一个子对象
            obj.index=i
            obj.onmouseover= function(){overme(this,ArrLevel,style2,temp)};           
            obj.onmouseout=function(){outme(this,ArrLevel,style2,temp)};
    obj.onclick=function(){clickme(this,ArrLinks,ArrDivs,style2,style3,temp)};
    obj.onfocus=function(){this.blur()};//去掉虚线柿
        }    
    }
    //二级菜单绑定事件
    function submenu(cssName2,style2,style3){ 
        var ArrLinks=getElementsByClassName(cssName2);//一级菜单父容器的数繿
    var ArrLevel = new Array();//第一级菜单的数组
    for(var i=0;i<ArrLinks.length;i++){
    var sublinks= ArrLinks[i].getElementsByTagName('A');//获得第一个子对象
    for(var m=0;m<sublinks.length;m++){
    ArrLevel.push(sublinks[m]);
    }   
    }
        for(var i=0;i<ArrLevel.length;i++){        
            var obj=ArrLevel[i];
            obj.index=i
            obj.onmouseover= function(){overme(this,ArrLevel,style2,temp1)};           
            obj.onmouseout=function(){outme(this,ArrLevel,style2,temp1)};
    obj.onclick=function(){subclick(this,ArrLevel,style2,style3,temp1)};
    obj.onfocus=function(){this.blur()};//去掉虚线柿
        }    
    }
    function overme(o,links,style2,state){
    if (state!=o.index){     
    addClass(o,style2);
        }
    }
    function outme(o,links,style2,state){
    if (state!=o.index){
    removeClass(o,style2);     
    };
    }
    //一级菜单点击事乿
    function clickme(o,links,divs,style2,style3,state){
    //要判断是否有子菜单项
    var objUl=links[o.index].getElementsByTagName('UL');
    var subNum=objUl.length;//是否有二级菜单，0为无，大丿为有;
    if (state!=o.index){
        for(var i=0;i<divs.length;i++){ 
        if(subNum>0){//如果存在二级菜单项，即隐藏它
    divs[i].style.display="none";
    //closeObj(divs[i]);
    }
        }
        if(subNum>0){//如果存在二级菜单项，显示当前点击的二级菜勿
          objUl[0].style.display="block";
      showObj(objUl[0]);
    }
            temp=o.index;
        }else{
         if(objUl[0].style.display=="block")
         objUl[0].style.display="none"
         else
         objUl[0].style.display="block"
        }
    for(var i=0;i<links.length;i++){
    var curobj= getFirstChild(links[i]);//获得第一个子对象     
    removeClass(curobj,style3);
    removeClass(curobj,style2);
    }
    addClass(o,style3);
    }
    //二级菜单点击事件
    function subclick(o,links,style2,style3,state){
    if (state!=o.index){
    for(var i=0;i<links.length;i++){
    removeClass(links[i],style2);
    }
    temp1=o.index;
        addClass(o,style2);
    }
    }//缓冲显示
    var flag=0;
    function showObj(obj){
    var allhight;
    allhight=obj.getElementsByTagName("li").length*26;//26为每个菜单项的高度，用来计算二级菜单的总高度⾿
       obj.style.height="1px";   
       var changeW=function(){   
      var obj_h=parseInt(obj.style.height);
      if(obj_h<=allhight){ 
    obj.style.height=(obj_h+Math.ceil((allhight-obj_h)/10))+"px";
      }
      else{ 
      clearInterval(bw1);
      }
       }       
       bw1= setInterval(changeW,20);//时间开僿
       if(flag>0){
     clearInterval(bw2);
       }
    }
    //缓冲关闭
    function closeObj(obj){
       flag++;       
       var closeDiv=function(){      
      clearInterval(bw1);
      var obj_h=parseInt(obj.style.height);
      if(obj_h>1){ 
     obj.style.height=(obj_h-Math.ceil(obj_h)/100)+"px";
      }
      else{
      clearInterval(bw2);
      obj.style.display="none";
      }
       }         
      bw2= setInterval(closeDiv,1);
      //alert(flag)
    }left.htm 中的JS修改function openP(_id)
        {
           var select_id = parseInt(_id.replace("box",""));
           if(document.getElementById(_id).style.display=="block")
            document.getElementById(_id).style.display="none";
           else
            document.getElementById(_id).style.display="block";
           for (i=1;i<=3;i++)
           {
              if(i!=select_id)
               document.getElementById("box"+i).style.display = "none";
           }
        }
      

  3.   

    网上的这个我已经按照你说的更新了：http://www.websjy.com/club/html/html.html
      

  4.   

    看一下这个
    http://www.111cn.net/js_a/76/984a3a2f920f28ee2cf62225db180a7a.htm#
      

  5.   

    中间的高度是因为你JS代码 171行 allhight=obj.getElementsByTagName("li").length*26这样子肯定是不对的，你检测obj下面所有的li，然后乘以高度26，但是，系统设置下，一级li只有3个，li内部的li不能计算入内，你可以这样: allhight= getElementsByClassName("level3").length*26;getElementsByClassName这个方法你内部就有，取样式为level3的li，或者你自己判断，obj下的一级li
      

  6.   

    menu_left.jsfunction getElementsByClassName(searchClass, node,tag){  
        if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}
        else{        
            node = node || document;        
            tag = tag || "*";        
            var classes = searchClass.split(" "),        
            elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),        
            patterns = [],         
            returnElements = [],        
            current,         
            match;        
            var i = classes.length;       
            while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}        
            var j = elements.length;       
            while(--j >= 0){            
                current = elements[j];           
                match = false;            
                for(var k=0, kl=patterns.length; k<kl; k++){                
                    match = patterns[k].test(current.className);                
                    if (!match)  break;           
                } 
                if (match)  returnElements.push(current);        
            }        
            return returnElements;   
        } 
    }/*通用加载函数，页面中如果要用到onload函数在窗体一加载时就执行的代码，可以直接添加到这个函数，否则会引起多个onload函数的执行冲稿
      带参数的调用方法：addLoadEvent(new Function("refurFrame('单词管理');"));
    */
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload!='function'){
            window.onload=func;    
        }
        else{
            window.onload=function(){
                oldonload();
                func();
            }    
        }
    }/*判断是否有className的函数，调用例子为：o.className=o.addClass(o,"normal");*/
    function hasClass(element, className) {  
        var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');     
        return element.className.match(reg); 
    } 
    /*动态添加className的函数，调用例子为：addClass(document.getElementById("test"), "test");*/
    function addClass(element, className) {  
        if (!this.hasClass(element, className)){   
            element.className += " "+className;/*如果有多个样式叠加，则用这种方式，如class="style1 style2"*/
            /*element.className = className; */ 
        } 
    }  
    /*动态删除className的函数，调用例子为：removeClass(document.getElementById("test"), "test") */
    function removeClass(element, className) {     
        if (hasClass(element, className)){ 
            var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');         
            element.className = element.className.replace(reg,' ');     
        } 
    } 
    /*获取第一个子节点的函数，兼容FF*/
    function getFirstChild(obj){
        var firstDIV;
        for (i=0; i<obj.childNodes.length; i++){
            if (obj.childNodes[i].nodeType==1){
                firstDIV=obj.childNodes[i];
                return firstDIV;
            }
            else 
                continue;
        }
    }addLoadEvent(new Function("hovermenu('level1','level2','hove','cur');"));
    //menu代表菜单总的ID名称
    //level1代表一级菜单项的父容器，level2代表二级菜单项的父容器，
    //后面的三个参数style1,style2,style3分别代表鼠标移入，移出，点击的三态样式名
    addLoadEvent(new Function("submenu('level2','hove1','hove1');"));/*滑动显隐菜单列表*/
    var temp;
    var temp1;
    function hovermenu(cssName1,cssName2,style2,style3){ 
        var ArrLinks=getElementsByClassName(cssName1);//一级菜单父容器的数繿
        var ArrLevel = new Array();//第一级菜单的数组
        for(var i=0;i<ArrLinks.length;i++){
            var curobj= getFirstChild(ArrLinks[i]);//获得第一个子对象                    
            ArrLevel.push(curobj);        
        }
        var ArrDivs=getElementsByClassName(cssName2);//二级菜单的父容器数组，要显示的二级菜单容嗿
        for(var i=0;i<ArrLinks.length;i++){        
            var obj=getFirstChild(ArrLinks[i]);//获得第一个子对象
            obj.index=i
            obj.onmouseover= function(){overme(this,ArrLevel,style2,temp)};           
            obj.onmouseout=function(){outme(this,ArrLevel,style2,temp)};
            obj.onclick=function(){clickme(this,ArrLinks,ArrDivs,style2,style3,temp)};
            obj.onfocus=function(){this.blur()};//去掉虚线柿
        }    
    }
    //二级菜单绑定事件
    function submenu(cssName2,style2,style3){ 
        var ArrLinks=getElementsByClassName(cssName2);//一级菜单父容器的数繿
        var ArrLevel = new Array();//第一级菜单的数组
        for(var i=0;i<ArrLinks.length;i++){
            var sublinks= ArrLinks[i].getElementsByTagName('A');//获得第一个子对象
            for(var m=0;m<sublinks.length;m++){
                ArrLevel.push(sublinks[m]);
            }           
        }    
        for(var i=0;i<ArrLevel.length;i++){        
            var obj=ArrLevel[i];
            obj.index=i
            obj.onmouseover= function(){overme(this,ArrLevel,style2,temp1)};           
            obj.onmouseout=function(){outme(this,ArrLevel,style2,temp1)};
            obj.onclick=function(){subclick(this,ArrLevel,style2,style3,temp1)};
            obj.onfocus=function(){this.blur()};//去掉虚线柿
        }    
    }
    function overme(o,links,style2,state){
        if (state!=o.index){        
            addClass(o,style2);                        
        }
    }
    function outme(o,links,style2,state){
        if (state!=o.index){
            removeClass(o,style2);                        
        };
    }
    //一级菜单点击事乿
    function clickme(o,links,divs,style2,style3,state){
        //要判断是否有子菜单项
        var objUl=links[o.index].getElementsByTagName('UL');
        var subNum=objUl.length;//是否有二级菜单，0为无，大丿为有;
        if (state!=o.index){    
            for(var i=0;i<divs.length;i++){ 
                if(subNum>0){//如果存在二级菜单项，即隐藏它
                    divs[i].style.display="none";
                    //closeObj(divs[i]);
                }                                            
            }        
            if(subNum>0){//如果存在二级菜单项，显示当前点击的二级菜勿
              objUl[0].style.display="block";
              showObj(objUl[0]);
            }        
            temp=o.index;
        }else{
            if(objUl[0].style.display=="block")
                    objUl[0].style.display="none"
            else
                    objUl[0].style.display="block"
        }    
        for(var i=0;i<links.length;i++){
            var curobj= getFirstChild(links[i]);//获得第一个子对象                    
            removeClass(curobj,style3);
            removeClass(curobj,style2);
        }                                
        addClass(o,style3);
    }
    //二级菜单点击事件
    function subclick(o,links,style2,style3,state){
        if (state!=o.index){
            for(var i=0;i<links.length;i++){
                removeClass(links[i],style2);    
            }
            temp1=o.index;        
            addClass(o,style2);    
        }
    }//缓冲显示
    var flag=0;
    function showObj(obj){
        var allhight;
        allhight=obj.clientHeight;//obj.getElementsByTagName("li").length*26;//26为每个菜单项的高度，用来计算二级菜单的总高度⾿
       obj.style.height="1px";   
       var changeW=function(){              
          var obj_h=parseInt(obj.style.height);
          if(obj_h<=allhight){ 
            obj.style.height=(obj_h+Math.ceil((allhight-obj_h)/10))+1+"px";
          }
          else{ 
          clearInterval(bw1);
          }
       }       
      // bw1= setInterval(changeW,20);//时间开僿
       if(flag>0){
         clearInterval(bw2);
       }
    }
    //缓冲关闭
    function closeObj(obj){    
       flag++;       
       var closeDiv=function(){                
          clearInterval(bw1);
          var obj_h=parseInt(obj.style.height);
          if(obj_h>1){ 
                 obj.style.height=(obj_h-Math.ceil(obj_h)/100)+"px";
          }
          else{
          clearInterval(bw2);
          obj.style.display="none";
          }
       }         
      bw2= setInterval(closeDiv,1);
      //alert(flag)
    }
    left.htmfunction openP(_id)
        {
           var select_id = parseInt(_id.replace("box",""));
           if(document.getElementById(_id).style.display=="block"){
                   document.getElementById(_id).style.display="none";
                   updateParentHeight(document.getElementById(_id));
           }else{
                   document.getElementById(_id).style.display="block";
                   updateParentHeight(document.getElementById(_id));
    }
           for (i=1;i<=3;i++)
           {
              if(i!=select_id)
                  document.getElementById("box"+i).style.display = "none";
           }
        }
    function updateParentHeight(obj){
    var p = obj.parentElement ;
    while(p&&p.tagName.toLowerCase()!="ul"){
    p = p.parentElement;
    }
    if(p&&p.tagName.toLowerCase()=="ul"){
    p.style.height=obj.parentElement.clientHeight+"px";
    }
    }
      

  7.   

    //注p在index里面，p的可能取值是0,2,1
    var index = 3;
    function showDetail(p){$("#userInfo p").click(
    function(){
    for(var i=0; i<index; i++){
    $("#userInfo index").removeClass('acss a');
    $(this).removeClass('acss a').addClass('acss a');
    }
    }
    );}
    怎样才能把javascript的var变量，放到id属性中？？？？急急急