有公司网页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;
}
}
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;
}
}
三级菜单除了IE,其他的浏览器还都出不来。不知是否是CSS的问题。
有木有高手请再帮忙指导指导呢,先谢过~
平台是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;
}
object = object.offsetParent;这段提示object.offsetParent为null
left += object.offsetLeft;
top += object.offsetTop;
}