教程集 > 脚本编程 > javascript > 正文 Javascript无限级树形菜单实例

Javascript无限级树形菜单实例

发布时间：2015-08-03 编辑：jiaochengji.com

本文介绍了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.jiaochengji.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.jiaochengji.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>

您可能感兴趣的文章：
jQuery多层级树形菜单 NotesForMenu
Javascript无限级树形菜单实例
 jquery 树形菜单代码一例(图文)
导航菜单-左则多层树形下拉菜单
 php mysql动态树型菜单的实现(递归函数的灵活应用)
一个基于jQuery的树型插件(OrangeTree)使用介绍
 php递归算法 php递归函数无限级分类
 php与js制作的无限级可伸缩菜单
 jquery 树形二级菜单实例代码
 JS 树形控件 MzTreeView

关键词：菜单 树形菜单 无限级分类 　

上一篇：js 图片滚动的小例子下一篇：javascript 模拟select下拉列表效果

[关闭]

Javascript无限级树形菜单实例

最近更新

浏览排行