一个JS三级树形菜单，折叠目录树的代码

发布时间：2018-08-29 12:54:49 所属栏目：政策来源：站长网

导读：一个JS三级树形菜单，折叠目录树的代码，您一眼看上去的感觉肯定是风格很一般！是的，您的眼光太好了，这是很久以前的一个树形菜单的实例，烈火网编辑费尽周折才找到所有的资源（包括小图片），尽管没有实用价值，但是学习一下还是不错的。示例： !DOCTYP

　　一个JS三级树形菜单，折叠目录树的代码，您一眼看上去的感觉肯定是风格很一般！是的，您的眼光太好了，这是很久以前的一个树形菜单的实例，烈火网编辑费尽周折才找到所有的资源（包括小图片），尽管没有实用价值，但是学习一下还是不错的。

　　示例：

<!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> //菜单一 first item---------------------------------------------------------- var item_num=3; //父层菜单的行数 Hom many rows is the parent item var item02_word=new Array(); //菜单的文字 The words of the child item for(i=0;i<item_num;i++) item02_word[i]=new Array(); item02_word[0][0]="市长致词02"; item02_word[0][1]="市民意见"; item02_word[0][2]="市民投诉"; item02_word[1][0]="市政领导02"; item02_word[1][1]="部门机构"; item02_word[1][2]="部门职责"; item02_word[2][0]="最新发布02"; item02_word[2][1]="综合经济"; item02_word[2][2]="科教文化"; var item02_link=new Array(); //菜单的链接 The links of the child item for(i=0;i<item_num;i++) item02_link[i]=new Array(); item02_link[0][0]="#none"; item02_link[0][1]="#none" item02_link[0][2]="#none" item02_link[1][0]="#none"; item02_link[1][1]="#none"; item02_link[1][2]="#none"; item02_link[2][0]="#none"; item02_link[2][1]="#none"; item02_link[2][2]="#none"; var item02=new Array(); //菜单的HTML The HTML code of the child item for(i=0;i<item_num;i++) item02[i]=""; for(i=0;i<item_num;i++) for(j=0;j<item02_word[i].length;j++) item02[i]+=" | -<img border=0 src=/uploads/allimg/1201/veryhuo_3_list3.gif><a class=childlink href="+item02_link[i][j]+" onclick=javascript:this.blur();>"+item02_word[i][j]+"</a><br>"; //------------定义一个清空各菜单的函数-------------- function closeVeryHuo02() { for(i=0;i<item_num;i++) { document.all.VeryHuo02.cells[2*i+1].innerHTML=""; item02Img[i].src="/uploads/allimg/1201/veryhuo_3_list.gif"; } } //------------------定义结束---------------------- //------------定义一个菜单展开的函数---------------- function openVeryHuo02(n) { if(document.all.VeryHuo02.cells[n*2+1].innerHTML=="") { closeVeryHuo02(); item02Img[n].src="/uploads/allimg/1201/veryhuo_3_list2.gif"; document.all.VeryHuo02.cells[n*2+1].innerHTML=item02[n]; } else closeVeryHuo02(); } //------------------定义结束---------------------- var item02_view=new Array(); item02_view[0]="<table id=VeryHuo02 cellpadding=0 cellspacing=0 border=0>n"; item02_view[1]=" <tr><td valign=bottom> -<img name=item02Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_1 class=parentlink href=javascript: onclick=javascript:openVeryHuo02(0);this.blur();>市长室</a></td></tr>n"; item02_view[2]=" <tr><td class=childlink></td></tr>n"; item02_view[3]=" <tr><td valign=bottom> -<img name=item02Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_2 class=parentlink href=javascript: onclick=javascript:openVeryHuo02(1);this.blur();>政府政务</a></td></tr>n"; item02_view[4]=" <tr><td class=childlink></td></tr>n"; item02_view[5]=" <tr><td valign=bottom> -<img name=item02Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_3 class=parentlink href=javascript: onclick=javascript:openVeryHuo02(2);this.blur();>政策法规</a></td></tr>n"; item02_view[6]=" <tr><td class=childlink></td></tr>n"; item02_view[7]="</table>n"; var item02_all=""; for(i=0;i<item02_view.length;i++) item02_all+=item02_view[i]; </script> <script> //菜单一 first item---------------------------------------------------------- var item_num=3; //父层菜单的行数 Hom many rows is the parent item var item01_word=new Array(); //菜单的文字 The words of the child item for(i=0;i<item_num;i++) item01_word[i]=new Array(); item01_word[0][0]="市长致词01"; item01_word[0][1]="市民意见"; item01_word[0][2]="市民投诉"; item01_word[1][0]="市政领导01"; item01_word[1][1]="部门机构"; item01_word[1][2]="部门职责"; item01_word[2][0]="最新发布01"; item01_word[2][1]="综合经济"; item01_word[2][2]="科教文化"; var item01_link=new Array(); //菜单的链接 The links of the child item for(i=0;i<item_num;i++) item01_link[i]=new Array(); item01_link[0][0]="#none"; item01_link[0][1]="#none" item01_link[0][2]="#none" item01_link[1][0]="#none"; item01_link[1][1]="#none"; item01_link[1][2]="#none"; item01_link[2][0]="#none"; item01_link[2][1]="#none"; item01_link[2][2]="#none"; var item01=new Array(); //菜单的HTML The HTML code of the child item for(i=0;i<item_num;i++) item01[i]=""; for(i=0;i<item_num;i++) for(j=0;j<item01_word[i].length;j++) item01[i]+=" | -<img border=0 src=/uploads/allimg/1201/veryhuo_3_list3.gif><a class=childlink href="+item01_link[i][j]+" onclick=javascript:this.blur();>"+item01_word[i][j]+"</a><br>"; //------------定义一个清空各菜单的函数-------------- function closeVeryHuo01() { for(i=0;i<item_num;i++) { document.all.VeryHuo01.cells[2*i+1].innerHTML=""; item01Img[i].src="/uploads/allimg/1201/veryhuo_3_list.gif"; } } //------------------定义结束---------------------- //------------定义一个菜单展开的函数---------------- function openVeryHuo01(n) { if(document.all.VeryHuo01.cells[n*2+1].innerHTML=="") { closeVeryHuo01(); item01Img[n].src="/uploads/allimg/1201/veryhuo_3_list2.gif"; document.all.VeryHuo01.cells[n*2+1].innerHTML=item01[n]; } else closeVeryHuo01(); } //------------------定义结束---------------------- var item01_view=new Array(); item01_view[0]="<table id=VeryHuo01 cellpadding=0 cellspacing=0 border=0>n"; item01_view[1]=" <tr><td valign=bottom> -<img name=item01Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_1 class=parentlink href=javascript: onclick=javascript:openVeryHuo01(0);this.blur();>市长室</a></td></tr>n"; item01_view[2]=" <tr><td class=childlink></td></tr>n"; item01_view[3]=" <tr><td valign=bottom> -<img name=item01Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_2 class=parentlink href=javascript: onclick=javascript:openVeryHuo01(1);this.blur();>政府政务</a></td></tr>n"; item01_view[4]=" <tr><td class=childlink></td></tr>n"; item01_view[5]=" <tr><td valign=bottom> -<img name=item01Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_3 class=parentlink href=javascript: onclick=javascript:openVeryHuo01(2);this.blur();>政策法规</a></td></tr>n"; item01_view[6]=" <tr><td class=childlink></td></tr>n"; item01_view[7]="</table>n"; var item01_all=""; for(i=0;i<item01_view.length;i++) item01_all+=item01_view[i]; </script> <script> //菜单一 first item---------------------------------------------------------- var item_num=3; //父层菜单的行数 Hom many rows is the parent item var item00_word=new Array(); //菜单的文字 The words of the child item for(i=0;i<item_num;i++) item00_word[i]=new Array(); item00_word[0][0]="市长致词00"; item00_word[0][1]="市民意见"; item00_word[0][2]="市民投诉"; item00_word[1][0]="市政领导00"; item00_word[1][1]="部门机构"; item00_word[1][2]="部门职责"; item00_word[2][0]="最新发布00"; item00_word[2][1]="综合经济"; item00_word[2][2]="科教文化"; var item00_link=new Array(); //菜单的链接 The links of the child item for(i=0;i<item_num;i++) item00_link[i]=new Array(); item00_link[0][0]="#none"; item00_link[0][1]="#none" item00_link[0][2]="#none" item00_link[1][0]="#none"; item00_link[1][1]="#none"; item00_link[1][2]="#none"; item00_link[2][0]="#none"; item00_link[2][1]="#none"; item00_link[2][2]="#none"; var item00=new Array(); //菜单的HTML The HTML code of the child item for(i=0;i<item_num;i++) item00[i]=""; for(i=0;i<item_num;i++) for(j=0;j<item00_word[i].length;j++) item00[i]+=" | -<img border=0 src=/uploads/allimg/1201/veryhuo_3_list3.gif><a class=childlink href="+item00_link[i][j]+" onclick=javascript:this.blur();>"+item00_word[i][j]+"</a><br>"; //------------定义一个清空各菜单的函数-------------- function closeVeryHuo00() { for(i=0;i<item_num;i++) { document.all.VeryHuo00.cells[2*i+1].innerHTML=""; item00Img[i].src="/uploads/allimg/1201/veryhuo_3_list.gif"; } } //------------------定义结束---------------------- //------------定义一个菜单展开的函数---------------- function openVeryHuo00(n) { if(document.all.VeryHuo00.cells[n*2+1].innerHTML=="") { closeVeryHuo00(); item00Img[n].src="/uploads/allimg/1201/veryhuo_3_list2.gif"; document.all.VeryHuo00.cells[n*2+1].innerHTML=item00[n]; } else closeVeryHuo00(); } //------------------定义结束---------------------- var item00_view=new Array(); item00_view[0]="<table id=VeryHuo00 cellpadding=0 cellspacing=0 border=0>n"; item00_view[1]=" <tr><td valign=bottom> -<img name=item00Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_1 class=parentlink href=javascript: onclick=javascript:openVeryHuo00(0);this.blur();>市长室</a></td></tr>n"; item00_view[2]=" <tr><td class=childlink></td></tr>n"; item00_view[3]=" <tr><td valign=bottom> -<img name=item00Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_2 class=parentlink href=javascript: onclick=javascript:openVeryHuo00(1);this.blur();>政府政务</a></td></tr>n"; item00_view[4]=" <tr><td class=childlink></td></tr>n"; item00_view[5]=" <tr><td valign=bottom> -<img name=item00Img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=item_3 class=parentlink href=javascript: onclick=javascript:openVeryHuo00(2);this.blur();>政策法规</a></td></tr>n"; item00_view[6]=" <tr><td class=childlink></td></tr>n"; item00_view[7]="</table>n"; var item00_all=""; for(i=0;i<item00_view.length;i++) item00_all+=item00_view[i]; </script> <script language=javascript> function closeTopTree() { for(i=0;i<topTreeTable.cells.length/2;i++) { topTreeTable.cells[2*i+1].innerHTML=""; treeImg[i].src="/uploads/allimg/1201/veryhuo_3_list.gif"; } } function openTopTree(n) { if(topTreeTable.cells[2*n+1].innerHTML=="") { closeTopTree(); treeImg[n].src="/uploads/allimg/1201/veryhuo_3_list2.gif"; switch(n) { case 0 : {topTreeTable.cells[2*n+1].innerHTML=item00_all;break;} case 1 : {topTreeTable.cells[2*n+1].innerHTML=item01_all;break;} case 2 : {topTreeTable.cells[2*n+1].innerHTML=item02_all;break;} } } else closeTopTree(); } </script> <table id=topTreeTable background=/uploads/allimg/1201/veryhuo_3_line1 style="border-collapse: collapse; background-image: url('/uploads/allimg/1201/veryhuo_3_line.gif'); background-repeat: repeat-y; background-position-x: 0px" cellpadding=0 cellspacing=0 border=0> <tr> <td height=20><img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a id=top1 href=#none onclick="openTopTree(0);">顶层一</a></td> </tr> <tr> <td></td> </tr> <tr> <td height=20><img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a href=#none onclick="openTopTree(1);">顶层二</a></td> </tr> <tr> <td></td> </tr> <tr> <td height=20><img name=treeImg src=/uploads/allimg/1201/veryhuo_3_list.gif border=0><a href=#none onclick="openTopTree(2);">顶层三</a></td> </tr> <tr> <td></td> </tr> </table> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!