js三级下拉菜单兼容性问题，求解

[jenny_jin]

有公司网页js三级下拉菜单在IE下运行正常。
FF无法下拉第二级。
chrome只能下拉二级，第三级无法显示。
求JS高手指点。谢谢！

function menuitem(){
 this.items=new Array();
 this.obj=null;
 this.width=0;
 this.height=0;
 this.top=0;
 this.left=0;
 this.parent=null;
 this.link=null;
 this.name="";
 this.target="";
 this.hasChild=false;
}

var menulist=new Array();
menulist[0]=new menuitem();

function addmenu(index,parent,name){
 menulist[index]=new menuitem();
 menulist[index].parent=parent;
 menulist[index].name=name;
 var itemIndex=menulist[parent].items.length;
 for(var i=0;i<menulist[parent].items.length;i++){
  if(menulist[menulist[parent].items[i]].name==name)
   itemIndex=i;
 }
 menulist[parent].items[itemIndex]=index;
 menulist[parent].hasChild=true;
}

function addsubmenu(parent,name,link,target){
 var index=parent*100+menulist[parent].items.length;
 menulist[index]=new menuitem();
 menulist[parent].items[menulist[parent].items.length]=index;
 menulist[parent].hasChild=true;
 menulist[index].name=name;
 menulist[index].link=link;
 menulist[index].parent=parent;
 if (target=='N')
   menulist[index].target="eipcontent";
 else if (target=='Y')
   menulist[index].target="_blank";
}
<Computed Value>
var tempstr="<table id=menuTab border=0 cellspacing=0 cellpadding=2 style=\"height:100%;font-size:12px;color:#FFFFFF;font-family:Arial\"><tr>";
var i=0;
tempstr+="<td width=12 style=\"display:none\"><a href=\"\" onclick=\"adjMenuTabPre();return false;\"><IMG SRC=\"/<Computed Value>/ThemeCommon/$FILE/left_arrow.gif\" border=0></a></td>"
tempstr+="<td width=12><IMG SRC=\"/<Computed Value>/ThemeCommon/$FILE/space.gif\" border=0 width=12></td>"
for(i=0;i<menulist[0].items.length;i++){
 tempstr+="<td nowrap style=\"cursor:default;border-left:1px solid #FFFFFF\" onmouseover=\"showMenu(this,"+menulist[0].items[i]+")\" onmouseout=\"timerID=setTimeout('hideMenu("+menulist[0].items[i]+")',100);\"> "+menulist[menulist[0].items[i]].name+" </td>";
}
tempstr+="<td width=12 style=\"border-left:1px solid #FFFFFF\"><IMG SRC=\"/<Computed Value>/ThemeCommon/$FILE/space.gif\" border=0 width=12></td>"
tempstr+="<td width=12 style=\"border-left:1px solid #FFFFFF\"><a href=\"\" onclick=\"adjMenuTabNext();return false;\"><IMG SRC=\"/<Computed Value>/ThemeCommon/$FILE/right_arrow.gif\" border=0></a></td>"
document.all["menuTabLayer"].innerHTML=tempstr;

var curfirstTab=2;
var curlastTab=-1;
adjMenuTabNext();

createDivMenu(0);
function createDivMenu(index){
 var tempstr="<div id=\"div_menu_"+index+"\" style=\"position:absolute;display:none;z-index:"+index+"\"><table border=1 cellpadding=4 cellspacing=0 style=\"border-collapse:collapse;font-size:13px;color:#FFFFFF;font-family:arial\" bgcolor=<Computed Value> bordercolor=#FFFFFF>";
 for(var i=0;i<menulist[index].items.length;i++){
  tempstr+="<tr onmouseover=\"showMenu(this,"+menulist[index].items[i]+")\" onmouseout=\"timerID=setTimeout('hideMenu("+menulist[index].items[i]+")',100);\">";
  if (menulist[menulist[index].items[i]].link!="")
   tempstr+="<td style=\"cursor:hand;padding-left:10px;padding-right:10px\" onclick=\"clickmenu("+menulist[index].items[i]+");return false;\">"+menulist[menulist[index].items[i]].name+"</td></tr>";
  else
   tempstr+="<td style=\"cursor:default;padding-left:10px;padding-right:10px\">"+menulist[menulist[index].items[i]].name+"</td></tr>";
  if (menulist[menulist[index].items[i]].items.length>0)
   createDivMenu(menulist[index].items[i]);
 }
 tempstr+="</table></div>"
 document.write(tempstr);
}

function adjMenuTabNext(){
 curfirstTab=curlastTab+1;
 var vmenuTabLayer=document.all["menuTabLayer"];
 var vmenuTab=document.all["menuTab"];
 var vmenuTabLayerWidth=vmenuTabLayer.clientWidth;
 curlastTab=vmenuTab.rows(0).cells.length-3;
 var tmpWidth=24;
 vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-1).style.display="none";
 vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-2).style.display="";
 vmenuTab.rows(0).cells(0).style.display="none";
 vmenuTab.rows(0).cells(1).style.display="";
 for (var i=2;i<vmenuTab.rows(0).cells.length-2;i++){
  if(i<curfirstTab){
   vmenuTab.rows(0).cells(i).style.display="none";
   vmenuTab.rows(0).cells(0).style.display="";
   vmenuTab.rows(0).cells(1).style.display="none";
  }else{
   tmpWidth+=vmenuTab.rows(0).cells(i).clientWidth+1;
   if (tmpWidth>vmenuTabLayerWidth){
    //alert("tmpWidth="+tmpWidth+",vmenuTabLayerWidth="+vmenuTabLayerWidth);
    vmenuTab.rows(0).cells(i).style.display="none";
    vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-1).style.display="";
    vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-2).style.display="none";
    if (curlastTab==(vmenuTab.rows(0).cells.length-3))
     curlastTab=i-1;
   }else{
    vmenuTab.rows(0).cells(i).style.display="";
   }
  }
 }
}

function adjMenuTabPre(){
 curlastTab=curfirstTab-1;
 curfirstTab=2;
 var vmenuTabLayer=document.all["menuTabLayer"];
 var vmenuTab=document.all["menuTab"];
 var vmenuTabLayerWidth=vmenuTabLayer.clientWidth;
 var tmpWidth=24;
 vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-1).style.display="none";
 vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-2).style.display="";
 vmenuTab.rows(0).cells(0).style.display="none";
 vmenuTab.rows(0).cells(1).style.display="";
 for (var i=vmenuTab.rows(0).cells.length-3;i>1;i--){
  if(i>curlastTab){
   vmenuTab.rows(0).cells(i).style.display="none";
   vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-1).style.display="";
   vmenuTab.rows(0).cells(vmenuTab.rows(0).cells.length-2).style.display="none";
  }else{
   tmpWidth+=vmenuTab.rows(0).cells(i).clientWidth+1;
   if (tmpWidth>vmenuTabLayerWidth){
    vmenuTab.rows(0).cells(i).style.display="none";
    vmenuTab.rows(0).cells(0).style.display="";
    vmenuTab.rows(0).cells(1).style.display="none";
    if (curfirstTab==2)
     curfirstTab=i+1;
   }else{
    vmenuTab.rows(0).cells(i).style.display="";
   }
  }
 }
 if (curfirstTab==2){
  curlastTab=1;
  adjMenuTabNext();
 }
}

var timerID="";
var activemenu=0;

function showMenu(obj,index){
 var curindex=index;
 var divobj;
 if(timerID>"") {
  clearTimeout(timerID);
  timerID="";
 }
 if (activemenu!=index){
  menulist[index].obj=obj;
  hideMenu(activemenu);
  if (menulist[index].hasChild){
   divobj=document.all["div_menu_"+index];
   var object=obj;
   var left=object.offsetLeft;
   var top=object.offsetTop;
   while (object.tagName!="BODY"){
    object = object.offsetParent;
    left += object.offsetLeft;
    top += object.offsetTop;
   }
   if (menulist[index].parent==0){
    top+=obj.clientHeight;
   }else{
    left+=obj.clientWidth-4;
    top+=4;
   }
   divobj.style.left=left;
   divobj.style.top=top;
   divobj.style.display="";
  }
  while (menulist[curindex].parent!=null){
   if (menulist[curindex].parent==0)
    menulist[curindex].obj.bgColor="<Computed Value>";
   else
    menulist[curindex].obj.bgColor="#808080";
   if (menulist[curindex].hasChild){
    divobj=document.all["div_menu_"+curindex];
    divobj.style.display="";
   }
   curindex=menulist[curindex].parent;
  }
 }
 activemenu=index;
}

function hideMenu(index){
 var curindex=index;
 var divobj;
 while (menulist[curindex].parent!=null){
  if (menulist[curindex].hasChild){
   divobj=document.all["div_menu_"+curindex];
   divobj.style.display="none";
  }
  menulist[curindex].obj.bgColor="";
  curindex=menulist[curindex].parent;
 }
 activemenu=0;
}

function clickmenu(index){
 if (menulist[index].link!=null){
  hideMenu(activemenu);
  window.open(menulist[index].link,menulist[index].target);
  return false;
 }
}

[画龙添脚]

document.all 这个兼容不好 换一种方式，比如getElementById

[__phoenix]

document.all不符合w3c标准，只能在ie内核的浏览器下执行。。。用getElementsByTagName....或getElementById().....

[最美的词]

楼上正解

[qz362100]

document.all 好像只有IE才可以运行的,火狐等浏览器最好用getElementById

[jenny_jin]

感谢ls几位高手指教,修改后FF二级菜单已经可以出来了，哇咔咔，感谢～
三级菜单除了IE，其他的浏览器还都出不来。不知是否是CSS的问题。
有木有高手请再帮忙指导指导呢，先谢过～

[scscms太阳光]

全部看完不知道浏览器蛋不蛋疼，反正我蛋疼。
把你的菜单数据放出来，或者换种方法写更好...

[OXiAo胖O]

[Quote=引用 2 楼 的回复:]
document.all不符合w3c标准，只能在ie内核的浏览器下执行。。。用getElementsByTagName....或getElementById().....
[/Quote]
我现在开发的网站之前全选的功能就是document.all这样子写的，挺郁闷的兼容性很差，确实不符合w3c标准，吃过这样亏，后来还得一一改过。

[86y]

看了楼主的代码，扩展性很不好。建议楼主去看下 js面向对象方法的无限级折叠菜单

[jenny_jin]

菜单是灵活性的，可设置的
平台是lotus domino
换种写法目前功力还不够，只能在这个基础上先研究研究
目前用FF测试是

function showMenu(obj,index){
 var curindex=index;
 var divobj;
 if(timerID>"") {
  clearTimeout(timerID);
  timerID="";
 }
 if (activemenu!=index){
  menulist[index].obj=obj;
  hideMenu(activemenu);
  if (menulist[index].hasChild){
   divobj=document.all["div_menu_"+index];
   var object=obj;
   var left=object.offsetLeft;
   var top=object.offsetTop;
   while (object.tagName!="BODY"){
    object = object.offsetParent;这段提示object.offsetParent为null
    left += object.offsetLeft;
    top += object.offsetTop;
   }
   if (menulist[index].parent==0){
    top+=obj.clientHeight;
   }else{
    left+=obj.clientWidth-4;
    top+=4;
   }
   divobj.style.left=left;
   divobj.style.top=top;
   divobj.style.display="";
  }
  while (menulist[curindex].parent!=null){
   if (menulist[curindex].parent==0)
    menulist[curindex].obj.bgColor="<Computed Value>";
   else
    menulist[curindex].obj.bgColor="#808080";
   if (menulist[curindex].hasChild){
    divobj=document.all["div_menu_"+curindex];
    divobj.style.display="";
   }
   curindex=menulist[curindex].parent;
  }
 }
 activemenu=index;
}

function hideMenu(index){
 var curindex=index;
 var divobj;
 while (menulist[curindex].parent!=null){
  if (menulist[curindex].hasChild){
   divobj=document.all["div_menu_"+curindex];
   divobj.style.display="none";
  }
  menulist[curindex].obj.bgColor="";
  curindex=menulist[curindex].parent;
 }
 activemenu=0;
}

[jenny_jin]

while (object.tagName!="BODY"){
object = object.offsetParent;这段提示object.offsetParent为null
left += object.offsetLeft;
top += object.offsetTop;
}

[jenny_jin]