Javascript无限级树形菜单实例

发布时间:2019-09-09编辑:脚本学堂
本文介绍了javascript实现无限级树形菜单的一个例子,js无限级树形菜单实现方法,有需要的朋友参考下。

例子,js实现无限级树形菜单。
 

复制代码 代码示例:
<html>
<head> 
<title>无限级树形菜单</title> 
<mce: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; } 
--></mce:style><style mce_bogus="1">#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> 
 
<mce:script language="javascript"><!-- 
function m_start(name,tt) //菜单组开始 

   document.writeln('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>'); 
   document.writeln('<td><a href="#" mce_href="#" onclick="zgmm()">'+name+'</a></td>'); 
   document.writeln('</tr>'); 
   document.writeln('<tr style="display: '+(tt==1?'block':'none')+';" mce_style="display: '+(tt==1?'block':'none')+';">'); 
   document.writeln('<td class="bj"> </td>'); 
   document.writeln('<td>'); 
   document.writeln('<table border="0" cellpadding="0" cellspacing="0">'); 
}  www.jb200.com
 
function m_end() //菜单组结束 

   document.writeln('</table></td></tr>'); 

 
function add_Sub(name,url,kj) //添加菜单项 

   document.writeln('<tr><td class="bj">2</td><td>'); 
   document.writeln('<a target="'+kj+'" href="'+url+'" mce_href="'+url+'">'+name+'</a>'); 
   document.writeln('</td></tr>'); 

 
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"; 

// --></mce:script> 
</head> 
 <body>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="A1"> 
<mce:script language="JavaScript"><!-- 
//    说明: 
//    菜单组开始,m_start(name,tt); name为菜单组名称,tt为1菜单组初始时展开,为0不展开 
//    菜单组结束:m_end(); 
//    添加菜单项:add_Sub("菜单项名称","url地址","框架名"); 
m_start("root",0); 
m_start("1.1",0); 
   m_start("1.1.1",0); 
     add_Sub("1.1.1.1","http://www.jb200.com/","_blank"); 
     add_Sub("1.1.1.2","#","_blank"); 
     add_Sub("1.1.1.3","#","_blank"); 
   m_end(); 
   m_start("1.1.2",0); 
     add_Sub("1.1.2.1","#","_blank"); 
     add_Sub("1.1.2.2","#","_blank"); 
     add_Sub("1.1.2.3","#","_blank"); 
   m_end(); 
     m_start("1.1.3",0); 
     add_Sub("1.1.3.1","#","_blank"); 
     add_Sub("1.1.3.2","#","_blank"); 
     add_Sub("1.1.3.3","#","_blank"); 
   m_end(); 
   add_Sub("1.1.4","#","_blank"); 
   add_Sub("1.1.5","#","_blank"); 
   add_Sub("1.1.6","#","_blank"); 
m_end(); 
m_start("1.2",0); 
   add_Sub("1.2.1","#","_blank"); 
   add_Sub("1.2.2","#","_blank"); 
   add_Sub("1.2.3","#","_blank"); 
m_end(); 
m_start("1.3",0); 
   add_Sub("1.3.1","#","_blank"); 
   add_Sub("1.3.2","#","_blank"); 
   add_Sub("1.3.3","#","_blank"); 
m_end(); 
add_Sub("1.4","#","_blank"); 
add_Sub("1.5","#","_blank"); 
m_end(); 
// --></mce:script> 
</table>
</body> 
</html>