横向的导航树形菜单上“展开项”的不足，求救紧急~~~~~？

qljsoft 2008-11-27 05:08:32

下面是一个html文件，你可以先拷下来直接运行预览看看，

我的情况是这样的：
在展开项的平台首页中的“技术交流”和“技术交流222”，
如果我直接把“技术交流”再展开对应的子模块（如菜鸟天堂、网络技术和安全等）不要求显示，比如我把代表
“技术交流”部分的模块切掉，保留“技术交流222”部分在的话，就显示不了整个菜单效果了，

具体点把，比如我在原有的代码基础上，我删除以下代码（红色部分表示），就不能正常显示整个菜单了，
为什么在叶子菜单下子叶子菜单的“添加时”一定要从1开始，而不能从2或者3等等开始呢？请你们帮我在已有的代码上修改下好吗？？?
争取做到不从1开始，也能够正常显示出来.
很急用，谢谢了！！！常在先等...

msub1=new mMenuItem('技术交流','','self',false,'','1','','','','');
msub1.addsubItem(new mMenuItem(' 菜鸟天堂','/bbs/list.asp?boardid=7','self',false,'讨论网络技术，关注网络安全。网络的加油站。',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 网络技术和安全','/bbs/list.asp?boardid=8','self',false,'讨论网络技术，关注网络安全。网络的加油站。',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 编程爱好者论坛','/bbs/list.asp?boardid=9','self',false,'各种编程语言、多媒体知识的交流园地',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 硬件讨论区','/bbs/list.asp?boardid=10','self',false,'讨论有关计算机硬件的论坛。',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 新硬件大看台','/bbs/list.asp?boardid=15','self',false,'，新，精——只介绍讨论最新最酷的硬件产品',null,'','','',''));
mpmenu1.addItem(msub1);

该树菜单的完整html代码：
因量比较多，发布不上来，所以我放在“附件”里面了，麻烦你们看看。

...全文

169 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

不悲不喜 2008-12-08

打赏
举报

刚刚，试着改了改。
不过代码实在是关连的地方太多。
改好它花费的代价要高于重做一个。
给你提供一个简单的解决方案吧。

1.追加如下函数。

function getMsubID(){

	var i=1;

	while(window["msub"+i]){

		i++

	}

	return(i);

}

2.追加子菜单的代码修改如下。

var msub = new mMenuItem('技术交流22', '', 'self', false, '', '1', '', '', '', '');

msub.addsubItem(new mMenuItem(' 菜鸟天堂22', '/bbs/list.asp?boardid=7', 'self', false, '讨论网络技术，关注网络安全。网络的加油站。', null, '', '', '', ''));

msub.addsubItem(new mMenuItem(' 网络技术和安全22', '/bbs/list.asp?boardid=8', 'self', false, '讨论网络技术，关注网络安全。网络的加油站。', null, '', '', '', ''));

msub.addsubItem(new mMenuItem(' 编程爱好者论坛22', '/bbs/list.asp?boardid=9', 'self', false, '各种编程语言、多媒体知识的交流园地', null, '', '', '', ''));

msub.addsubItem(new mMenuItem(' 硬件讨论区22', '/bbs/list.asp?boardid=10', 'self', false, '讨论有关计算机硬件的论坛。', null, '', '', '', ''));

msub.addsubItem(new mMenuItem(' 新硬件大看台22', '/bbs/list.asp?boardid=15', 'self', false, '，新，精——只介绍讨论最新最酷的硬件产品', null, '', '', '', ''));

mpmenu1.addItem(msub);

window["msub" + getMsubID()] = msub;

mengxj85 2008-12-05

打赏
举报

大哥，好长啊

qljsoft 2008-11-27

打赏
举报

for(var j=1;j<=mnumberofsub;j++){
thisitem=eval("msub"+j);
stringx+='<div id=msubmenudiv'+j+
' style="filter:Alpha(Opacity=80);tag:'+thisitem.level+';cursor:'+mcursor+';position:absolute;'+
'width:'+mmenuitemwidth+'px; z-index:'+(j+200);
if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
stringx+=';border-left: 1px solid '+mmidoutcolor+
';border-top: 1px solid '+mmidoutcolor;}
stringx+=';border-right: 1px solid '+mmenuinbordercolor+
';border-bottom: 1px solid '+mmenuinbordercolor+';visibility:hidden" onselectstart="event.returnValue=false">\n'+
'<table width="100%" border="0" height="100%" align="center" cellpadding="0" cellspacing="2" '+
'style="'+mfonts+' border-left: 1px solid '+mmenuoutbordercolor;
if(mmenuinbordercolor!=mmenuoutbordercolor&&msubedge=="0"){
stringx+=';border-right: 1px solid '+mmidincolor+
';border-bottom: 1px solid '+mmidincolor;}
stringx+=';border-top: 1px solid '+mmenuoutbordercolor+
';padding: 4px" bgcolor='+mmenucolor+'>\n'
for(var i=0;i<thisitem.items.length;i++){
var thismenuitem=thisitem.items[i];
var imgsize="";
if(thismenuitem.sizex!="0"||thismenuitem.sizey!="0")imgsize=" width="+thismenuitem.sizex+" height="+thismenuitem.sizey;
var ifspace="";
if(thismenu.caption!="")ifspace=" ";
if(thismenuitem.hasc!=null){
stringx += "<tr><td id=mp"+thismenuitem.hasc+" class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
"' width=100% onmouseout=mmenuitem_out(true) onmouseover=\"mmenuitem_over(msubmenudiv"+j+
",'"+thismenuitem.hasc+"',-1,"+j+","+i+");mshowsubmenu(msubmenudiv"+thismenuitem.hasc+",mp"+thismenuitem.hasc+",msubmenudiv"+j+");\""+
"><table id=mitem"+thismenuitem.hasc+" cellspacing='0' cellpadding='0' border='0' width='100%' style='"+mfonts+"'><tr><td ";
if(thismenuitem.pos=="0"){
stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td><td";
}else if(thismenuitem.pos=="1"){
stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td><td";
}else if(thismenuitem.pos=="2"){
stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td><td background='"+thismenuitem.img+"'";
}else{
stringx += ">"+thismenuitem.caption+"</td><td";
}
stringx += " align=right width='1'><font face='Webdings' style='font-size: 6pt'>4</font></td></tr></table></td></tr>\n";
}else if(!thismenuitem.isline){
stringx += "<tr><td class=coolButton style='border: "+mitemedge+"px solid "+mmenucolor+
"' width=100% height=15px onmouseover=\"mmenuitem_over(msubmenudiv"+j+
",false,-1,"+j+","+i+");\" onmouseout=mmenuitem_out() onmousedown=mmenuitem_down() onmouseup=";
stringx += "mmenuitem_up();mexec3("+j+","+i+"); ";
if(thismenuitem.pos=="0"){
stringx += "><img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+">"+ifspace+thismenuitem.caption+"</td></tr>";
}else if(thismenuitem.pos=="1"){
stringx += ">"+thismenuitem.caption+ifspace+"<img align=absmiddle src='"+thismenuitem.img+"'"+imgsize+"></td></tr>";
}else if(thismenuitem.pos=="2"){
stringx += "background='"+thismenuitem.img+"'>"+thismenuitem.caption+"</td></tr>";
}else{
stringx += ">"+thismenuitem.caption+"</td></tr>";
}
}else{
stringx+='<tr><td height="1" background="/images/hr.gif" onmousemove="clearTimeout(mpopTimer);"><img height="1" width="1" src="none.gif" border="0"></td></tr>\n';
}
}
stringx+='</table>\n</div>'
}
document.write("<div align='center' id='JsMenuCSS'>"+stringx+"</div>");
}
mpmenu1=new mMenu('平台首页','/','self','','','','');
mpmenu1.addItem(new mMenuItem(' 用户注册','/register.asp','self',false,'用户注册',null,'','','',''));
mpmenu1.addItem(new mMenuItem(' 用户登录','/login.asp','self',false,'用户登录',null,'','','',''));
mpmenu1.addItem(new mMenuItem(' 用户退出','/login.asp?action=logout','self',false,'用户退出',null,'','','',''));
mpmenu1.addItem(new mMenuItem(' 资料修改','/bbs/MYMODIFY.ASP','self',false,'',null,'','','',''));

msub1=new mMenuItem('技术交流','','self',false,'','1','','','','');
msub1.addsubItem(new mMenuItem(' 菜鸟天堂','/bbs/list.asp?boardid=7','self',false,'讨论网络技术，关注网络安全。网络的加油站。',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 网络技术和安全','/bbs/list.asp?boardid=8','self',false,'讨论网络技术，关注网络安全。网络的加油站。',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 编程爱好者论坛','/bbs/list.asp?boardid=9','self',false,'各种编程语言、多媒体知识的交流园地',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 硬件讨论区','/bbs/list.asp?boardid=10','self',false,'讨论有关计算机硬件的论坛。',null,'','','',''));
msub1.addsubItem(new mMenuItem(' 新硬件大看台','/bbs/list.asp?boardid=15','self',false,'，新，精——只介绍讨论最新最酷的硬件产品',null,'','','',''));
mpmenu1.addItem(msub1);

msub2=new mMenuItem('技术交流22','','self',false,'','1','','','','');
msub2.addsubItem(new mMenuItem(' 菜鸟天堂22','/bbs/list.asp?boardid=7','self',false,'讨论网络技术，关注网络安全。网络的加油站。',null,'','','',''));
msub2.addsubItem(new mMenuItem(' 网络技术和安全22','/bbs/list.asp?boardid=8','self',false,'讨论网络技术，关注网络安全。网络的加油站。',null,'','','',''));
msub2.addsubItem(new mMenuItem(' 编程爱好者论坛22','/bbs/list.asp?boardid=9','self',false,'各种编程语言、多媒体知识的交流园地',null,'','','',''));
msub2.addsubItem(new mMenuItem(' 硬件讨论区22','/bbs/list.asp?boardid=10','self',false,'讨论有关计算机硬件的论坛。',null,'','','',''));
msub2.addsubItem(new mMenuItem(' 新硬件大看台22','/bbs/list.asp?boardid=15','self',false,'，新，精——只介绍讨论最新最酷的硬件产品',null,'','','',''));
mpmenu1.addItem(msub2);

mpmenu9=new mMenu('站点服务','','self','','','','');
mpmenu9.addItem(new mMenuItem(' 免费邮箱','/WebMail/','self',false,'',null,'','','',''));
mpmenu9.addItem(new mMenuItem(' 免费留言簿','/GuestBook/','self',false,'',null,'','','',''));

mwritetodocument();
</script>
</body>
</html>

qljsoft 2008-11-27

打赏
举报

qljsoft 2008-11-27

打赏
举报

小逗狗 2008-11-27

打赏
举报

没看见附件啊

qljsoft 2008-11-27

打赏
举报

[size=16px]下面是我的html文件，你可以先拷下来直接运行预览看看，
（因量比较多，发布不上来，所以分两次发上来，不好意思了。）

该树菜单的完整html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航菜单的例子</title>
</head>

<body>

<script language="JavaScript">
var mmenus = new Array();
var misShow = new Boolean();
misShow=false;
var misdown = new Boolean();
misdown=false;
var mnumberofsub=0;
var musestatus=false;
var mpopTimer = 0;
mmenucolor='#89CB10';mfontcolor='MenuText';mmenuoutcolor='#CCFFFF';mmenuincolor='#CCFFFF';mmenuoutbordercolor='#CCFFFF';mmenuinbordercolor='#CCFFFF';mmidoutcolor='#CCFFFF';mmidincolor='#CCFFFF';mmenuovercolor='#000000';mitemedge='0';msubedge='1';mmenuunitwidth=66;mmenuitemwidth=140;mmenuheight=25;mmenuwidth='100%';mmenuadjust=0;mmenuadjustV=0;mfonts='font-family: 宋体; font-size: 10pt; color: MenuText; ';mcursor='hand';
var swipeSteps = 4;
var swipemsec = 25;
var swipeArray = new Array();
function swipe(el, dir, steps, msec) {
if (steps == null) steps = swipeSteps;
if (msec == null) msec = swipemsec;
if (el.swipeIndex == null)
el.swipeIndex = swipeArray.length;
if (el.swipeTimer != null)
window.clearTimeout(el.swipeTimer);
swipeArray[el.swipeIndex] = el;
el.style.clip = "rect(-99999, 99999, 99999, -99999)";
if (el.swipeCounter == null || el.swipeCounter == 0) {
el.orgLeft = el.offsetLeft;
el.orgTop = el.offsetTop;
el.orgWidth = el.offsetWidth;
el.orgHeight = el.offsetHeight;
}
el.swipeCounter = steps;
el.style.clip = "rect(0,0,0,0)";
window.setTimeout("repeat(" + dir + "," + el.swipeIndex + "," + steps + "," + msec + ")", msec);
}
function repeat(dir, index, steps, msec) {
el = swipeArray[index];
var left = el.orgLeft;
var top = el.orgTop;
var width = el.orgWidth;
var height = el.orgHeight;
if (el.swipeCounter == 0) {
el.style.clip = "rect(-99999, 99999, 99999, -99999)";
return;
}
else {
el.swipeCounter--;
el.style.visibility = "visible";
switch (dir) {
case 2:
el.style.clip = "rect(" + height*el.swipeCounter/steps + "," + width + "," + height + "," + 0 + ")";
el.style.top = top - height*el.swipeCounter/steps;
break;
case 8:
el.style.clip = "rect(" + 0 + "," + width + "," + height*(steps-el.swipeCounter)/steps + "," + 0 + ")";
el.style.top = top + height*el.swipeCounter/steps;
break;
case 6:
el.style.clip = "rect(" + 0 + "," + width + "," + height + "," + width*(el.swipeCounter)/steps + ")";
el.style.left = left - width*el.swipeCounter/steps;
break;
case 4:
el.style.clip = "rect(" + 0 + "," + width*(swipeSteps - el.swipeCounter)/steps + "," + height + "," + 0 + ")";
el.style.left = left + width*el.swipeCounter/steps;
break;
}

el.swipeTimer = window.setTimeout("repeat(" + dir + "," + index + "," + steps + "," + msec + ")", msec);
}
}
var mtmpleft="";
var mtmptop="";
function hideSwipe(el) {
window.clearTimeout(el.swipeTimer);
el.style.visibility = "hidden";
el.style.clip = "rect(-99999, 99999, 99999, -99999)";
el.swipeCounter = 0;
if(mtmpleft!="")el.style.left = mtmpleft;
if(mtmptop!="")el.style.top = mtmptop;
}

本系统的所有功能均通过菜单进入，菜单时系统操作的最基本、最重要工具新建打开在职退休离休统计生成上报月库系统系统退出　月库月库维护维护维护汇总报盘磁盘关闭维护帮助系统文件 ...

实现上图三级菜单横向展开的样式使用element-ui的树形插件，其实实现上面的效果还是很简单的，只要动态的给三级节点加一下样式就可以了，可以看下下面的代码片段。树形插件的定义 <el-tree class="tree-style...