Javascript无限级树形菜单

最新推荐文章于 2020-12-23 04:08:24 发布

yanleigis

最新推荐文章于 2020-12-23 04:08:24 发布

阅读量1.4k

点赞数

分类专栏： javascript html web 文章标签： javascript function border class url table

javascript 同时被 2 个专栏收录

67 篇文章 0 订阅

订阅专栏

html web

40 篇文章 0 订阅

订阅专栏

<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 m_start(name,tt)     //菜单组开始
{
   document.writeln('<tr><td class="bj">'+(tt==1?'1':'0')+'</td>');
   document.writeln('<td><a href="#" οnclick="zgmm()">'+name+'</a></td>');
   document.writeln('</tr>');
   document.writeln('<tr style="display: '+(tt==1?'block':'none')+';">');
   document.writeln('<td class="bj"> </td>');
   document.writeln('<td>');
   document.writeln('<table border="0" cellpadding="0" cellspacing="0">');
}

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+'">'+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";
}
</script>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%" id="A1">
<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.17173.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();

</script>
</table>

</body>

</html>
<html> <head> <title>无限级树形菜单</title> <mce:style></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"></mce:script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="A1"> <mce:script language="JavaScript"></mce:script> </table> </body> </html>

来自：http://hi.baidu.com/qdh126/blog/item/2120f6445f9d194b510ffee4.html

yanleigis

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Javascript无限级树形菜单

无限级树形菜单#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; tex
复制链接

扫一扫