JavaScript实现树形目录_js树形目录-优快云博客

本文介绍了一种使用JavaScript实现的无限级树形菜单方法。该方法通过定义一个名为treeClass的类来创建树形结构，并提供了菜单开始、结束、添加菜单组及菜单项等方法。此外，还详细展示了如何使用这些方法构建复杂的树形结构。

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

JavaScript实现树形目录（2）

2007-02-02 09:02

<html>

<head>
<title>无限级树形菜单</title>
<style>
#A1 td { vertical-align: top; }
#A1 td.bj { font-family: Wingdings; color: #FF9933; text-align: center; }
#A1 td.bj , #A1 td.kg { width: 24; }
#A1 a:link , #A1 a: visited { color: #cc0080; text-decoration: none; }
#A1 a:hover { color: #0ff080; text-decoration: none; }
</style>

function treeClass(id)
{
this.id = id;
this.HTMLdata = "";

this.start = function() //菜单开始
{
this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0" width="100%" id="'+this.id+'">';
}

this.end = function() //菜单结束
{
this.HTMLdata += '</table>';
}

this.m_start = function(name,tt)    //菜单组开始
{
   this.HTMLdata += '<tr><td class="bj">'+(tt==1?'1':'0')+'</td>';
   this.HTMLdata += '<td><a href="#" onclick="zgmm()">'+name+'</a></td>';
   this.HTMLdata += '</tr>';
   this.HTMLdata += '<tr style="display: '+(tt==1?'block':'none')+';">';
   this.HTMLdata += '<td class="bj"> </td>';
   this.HTMLdata += '<td>';
   this.HTMLdata += '<table border="0" cellpadding="0" cellspacing="0">';
}

this.m_end = function() //菜单组结束
{
this.HTMLdata += '</table></td></tr>';
}

this.add_Sub = function(name,url,kj)    //添加菜单项
{
   this.HTMLdata += '<tr><td class="bj">2</td><td>';
   this.HTMLdata += '<a target="'+kj+'" href="'+url+'">'+name+'</a>';
   this.HTMLdata += '</td></tr>';
}

this.print = function() //输出菜单
{
document.write(this.HTMLdata);
}
}

function zgmm()
{
  var ero = event.srcElement.parentElement.previousSibling;
  var mo = event.srcElement.parentElement.parentElement.nextSibling;
  mo.style.display = (mo.style.display=="none")?"block":"none";
  ero.innerHTML = (mo.style.display=="none")?"0":"1";
}
</script>
</head>

<body>

var tObj = new treeClass("A1")
tObj.start();
tObj.m_start("菜单组名称",1);
   tObj.m_start("菜单组名称",0);
     tObj.add_Sub("菜单项名称","#","_blank");
     tObj.m_start("菜单组名称",0);
       tObj.m_start("菜单组名称",0);
         tObj.add_Sub("菜单项名称，这项太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太长了，一行显示不了","#","_blank");
         tObj.add_Sub("菜单项名称","#","_blank");
       tObj.m_end();
       tObj.m_start("菜单组名称",0);
         tObj.add_Sub("菜单项名称","#","_blank");
       tObj.m_end();
     tObj.m_end();
     tObj.add_Sub("菜单项名称","#","_blank");
     tObj.add_Sub("菜单项名称","#","_blank");
   tObj.m_end();
   tObj.m_start("菜单组名称",0);
     tObj.add_Sub("菜单项名称","#","_blank");
     tObj.add_Sub("菜单项名称","#","_blank");
   tObj.m_end();
   tObj.add_Sub("菜单项名称","#","_blank");
   tObj.add_Sub("菜单项名称","#","_blank");
   tObj.add_Sub("菜单项名称","#","_blank");
tObj.m_end();
tObj.m_start("菜单组名称",0);
   tObj.add_Sub("菜单项名称","#","_blank");
   tObj.add_Sub("菜单项名称","#","_blank");
   tObj.add_Sub("菜单项名称","#","_blank");
tObj.m_end();
tObj.add_Sub("菜单项名称","#","_blank");
tObj.add_Sub("菜单项名称","#","_blank");
tObj.m_start("菜单组名称",0);
   tObj.add_Sub("菜单项名称","#","_blank");
   tObj.add_Sub("菜单项名称","#","_blank");
   tObj.m_start("菜单组名称",0);
     tObj.add_Sub("菜单项名称","#","_blank");
   tObj.m_end();
tObj.m_end();
tObj.add_Sub("菜单项名称","#","_blank");
tObj.add_Sub("菜单项名称","#","_blank");
tObj.end();
tObj.print();

</script>

</body>

</html>