javascript无限制级树形菜单

最新推荐文章于 2025-08-07 21:48:39 发布

原创最新推荐文章于 2025-08-07 21:48:39 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #table #border #url #stylesheet #generator

该博客主要介绍了JavaScript无限制级树形菜单的实现。包含isparent函数用于控制菜单显示与隐藏，additem函数用于添加菜单项，还给出了开发语言、.NET技术等菜单项示例，以及定时添加菜单项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
<HEAD>
<TITLE> javascript无限制级树形菜单 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK REL="STYLESHEET" HREF="css/main.css">
<body style="margin:5 0 0 0 ;background-color:lightsteelblue" >
<script>
function isparent(id,url,target,pic,isp)
{
     //如果不显示就显示
if(document.all(id+"r").style.display=="none")
{

    if(document.all(id+"r").innerText!="")
    {
      document.all(id+"r").style.display="";
    if(isp>0)
   {
     var img=document.all("a"+id).src;
     var imgarray=new Array();
     imgarray=img.split("/");
     if(imgarray[imgarray.length-1]!="tree_L.gif")
     {
   document.all("a"+id).src="http://www.pearl-sh.com/php/admin/treeimage/tree_Tminus.gif";
     }
   document.all("b"+id).src="http://www.pearl-sh.com/php/admin/treeimage/openfld.gif";
   }
    }
}
//如果显示就不显示
     else
     {
      document.all(id+"r").style.display="none";
   if(isp>0)
   {
      var img=document.all("a"+id).src;
      var imgarray=new Array();
      imgarray=img.split("/");
   if(imgarray[imgarray.length-1]!="tree_L.gif")
      {
   document.all("a"+id).src="http://www.pearl-sh.com/php/admin/treeimage/tree_Tplus.gif";
   }
   document.all("b"+id).src="http://www.pearl-sh.com/php/admin/treeimage/clsfld.gif";
   }
     }

///如果有url
if(url!="")
{
if(target=="")
{
   window.open(url);
}
else
{
   if(target=="parent")
  {
    if(confirm("确定了吗"))
   {
      parent.location.href=url;
   }
   }else
  {
   parent.mainFrame.location.href=url;
        }
}
}

}
/*******************************************
**********功能：javascript无限制级树形菜单*************
**********作者:peter*************************
**********Email:cztianyu@hotmail.com**************
**********发布日期：2004-12-15 ******************
**********下载地址:http://www.lcsww.com/download/index.asp******************
**********请转载时保留版权信息**************
*******************************************/
function additem(pid,textname,nid,url,target,pic,isp)
{

//判断是不是存在
// alt 减一
document.all(pid).alt=eval(eval(document.all(pid).alt)-1);
//////////////////////////////父节点alt值
var iso=document.all(pid).iso+document.all(pid).alt+";";//
var thebgcolor="";
var table="";
    table=table+"<div id=/""+nid+ "/" titl='"+eval(eval(document.all(pid).titl)+1)+"' alt='"+isp+"' iso='"+iso+"'>";
table=table+"<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/" >";
    table=table+"<tr title=/""+textname+"/" onclick=/"isparent('"+nid+"','"+url+"','"+target+"','"+pic+"','"+isp+"')/" style='cursor:hand;'>";
table=table+"<td>";
//画 | 线条
var k=0;
for(k=0;k<eval(document.all(pid).titl)+1;k++)
{
         var str=document.all(pid).iso;
      str=str.substring(0,str.length-1);
   var strsz=new Array();
   strsz=str.split(";");
      if(eval(strsz[k])==0)
      {
    table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/tree_B.gif/" width='19' height='20' >";
      }
      else
      {
    table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/tree_I.gif/" >";
      }
}
//如果有子，就用+和书本图标表示
if(isp>0)
{
       if(eval(document.all(pid).alt)==0)
    {
     table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/tree_L.gif/" id=/"a"+nid+"/">";
    }
    else
    {
       table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/tree_Tplus.gif/" id=/"a"+nid+"/">";
    }
     table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/clsfld.gif/"id=/"b"+nid+"/">";
    }
else
//没有子节点直接用图片表示
{
      //如果alt>0 判断是不是最后一个节点
   if(eval(document.all(pid).alt)>0)
   {
  table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/tree_T.gif/">";
   }
   else
   {
    table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/tree_L.gif/">";
   }
   table=table+"<img src=/"http://www.pearl-sh.com/php/admin/treeimage/"+pic+"/">";
}
    table=table+"</td><td>";
    table=table+textname;
table=table+"</td>";
table=table+"</tr>";
table=table+"</table>";
table=table+"</div><div id='"+nid+"r' style='display:none;width:"+eval(20*(eval(document.all(pid).titl)+3)+200)+";' ></div>";
    document.all(pid+"r").innerHTML=document.all(pid+"r").innerHTML+table;
}

</script>

          <div id="18"titl="0" style="width:200;" alt="2" iso="1;">
<table border="0" cellpadding="0" cellspacing="0" >
<tr onclick="isparent('18','','mainFrame','link.gif','2')" title="开发语言" style="cursor:hand;">
   <td ><img src="http://www.pearl-sh.com/php/admin/treeimage/tree_Tplus.gif" id="a18"><img src="http://www.pearl-sh.com/php/admin/treeimage/clsfld.gif" id="b18"></td>
   <td >开发语言</td>
</tr>
</table>
</div><div id="18r" style='display:none;width:150'></div>

          <div id="26"titl="0" style="width:200;" alt="2" iso="1;">
<table border="0" cellpadding="0" cellspacing="0" >
<tr onclick="isparent('26','','mainFrame','link.gif','2')" title=".NET技术" style="cursor:hand;">
   <td ><img src="http://www.pearl-sh.com/php/admin/treeimage/tree_Tplus.gif" id="a26"><img src="http://www.pearl-sh.com/php/admin/treeimage/clsfld.gif" id="b26"></td>
   <td >.NET技术</td>
</tr>
</table>
</div><div id="26r" style='display:none;width:150'></div>






          <div id="1"titl="0" style="width:200;" alt="0" iso="1;">
<table border="0" cellpadding="0" cellspacing="0" >
<tr onclick="isparent('1','itemadd.php','mainFrame','msn.gif','0')" title="栏目管理" style="cursor:hand;">
   <td ><img src="http://www.pearl-sh.com/php/admin/treeimage/tree_L.gif"><img src="http://www.pearl-sh.com/php/admin/treeimage/msn.gif"></td>
   <td >栏目管理</td>
</tr>
</table>
</div><div id="1r" style='display:none;width:150'></div>
   <script>function itemsettime()
{
   try{
      var a=(document.all('27').id);
   }
   catch(e)
   {
additem("18","VC/MFC","27","","mainFrame","link.gif","1");