无限级关联菜单[完全js版](树型)

最新推荐文章于 2025-07-06 12:04:56 发布

原创最新推荐文章于 2025-07-06 12:04:56 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #border #javascript #class #url #table

JAVASCRIPT 专栏收录该内容

15 篇文章

订阅专栏

这是一个使用JavaScript实现的无限级关联菜单的代码示例，由多菜鸟于2007年4月7日编写。菜单数据以数组形式存储，通过函数listTree递归展示树型结构。代码中包含了展开/折叠菜单的功能，并支持指定ID的菜单展开。

部署运行你感兴趣的模型镜像

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无限级关联菜单[完全js版](树型)</title>
<script language="JavaScript" type="text/javascript">
/*
功能：无限级关联菜单[完全js版](树型)
作者：多菜鸟
时间： 2007-04-07
blog: http://blog.youkuaiyun.com/kingerq/

数组形如:
menuArr[ID] = [名称, 父ID];

*/
var menuArr = new Array();
menuArr[1] = ["中国", 0];
menuArr[2] = ["美国", 0];
menuArr[3] = ["日本", 0];
menuArr[4] = ["浙江", 1];
menuArr[5] = ["福建", 1];
menuArr[6] = ["东京", 3];
menuArr[7] = ["杭州", 4];
menuArr[8] = ["温州", 4];
menuArr[9] = ["鹿城", 8];

//展开菜单
//str 以","号分隔的目录ID字符串
function spreadKid(str){
var pat = /[/d,]+/;
if( ! pat.test( str ) ) return;

var arr = str.split(",");
for( var i=0; i < arr.length-1; i++ ) {
   chkImg(arr[i], i+1);
}
}
//取得指定URL参数值
function returnGetValue(pVar,pURL){
   pURL = pURL || window.location.href;
   try{
        pURL=decodeURIComponent(pURL)//即使是用decodeURI也是同样的结果
   }catch(e){
             //
   }

   var vars =pURL.split("?");
   if(vars.length==1) return "";

   var varsList=vars[1].split("&");
   var equalString;
   for(var i=0;equalString=varsList[i];i++){
        var equalArray=equalString.split("=");
        if(equalArray[0]==pVar)
            return equalArray[1] || "";
   }
   return "";
}
//document.write( listTree(0,0 ) );

</script>
<style type="text/css">

</style>
</head>