以前做网站，树形菜单一般都很简单，自己定义风格样式，简单的js控制，后来原来网上很多文章都在讨论Js树型菜单，看了几个实例，发现这个树比较简单好用。http://hovertree.com/texiao/js/9.htm这个无限级可刷新Js树型菜单 menuTree 1、可设 ...
以前做网站，树形菜单一般都很简单，自己定义风格样式，简单的js控制，后来原来网上很多文章都在讨论Js树型菜单，看了几个实例，发现这个树比较简单好用。http://hovertree.com/texiao/js/9.htm下载 http://hovertree.com/texiao/js/9/treemenu.rar解压缩treemenu.rar 包。 打开example01.html文件 http://hovertree.com/texiao/js/9.htm
<div class="dtree"><p><a href="javascript: hovertreemenu.openAll();">全部展开</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</a></p><script type="text/javascript"><!--var hovertreemenu = new dTree('hovertreemenu');hovertreemenu.add(0, -1, '何问起树形菜单');hovertreemenu.add(1,0,'节点 1','http://hovertree.com');hovertreemenu.add(2, 0, '节点 2', 'http://tool.hovertree.com/');hovertreemenu.add(3, 1, '节点 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm');hovertreemenu.add(4, 0, '节点 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm');hovertreemenu.add(5, 3, '节点 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm');hovertreemenu.add(6, 5, '节点 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm');hovertreemenu.add(7, 0, '节点 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm');hovertreemenu.add(8, 1, '节点 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm');hovertreemenu.add(9, 0, '图片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif');hovertreemenu.add(10, 9, '欢迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir');hovertreemenu.add(11, 9, '雪花飞舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm');hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif');document.write(hovertreemenu);//--></script></div>d.add(0,-1,’My example tree’); 属性菜单使用说明
函数add() openAll() closeAll() openTo() 完整代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>JS树形菜单Tree - 何问起</title> 5 <link rel="StyleSheet" href="http://hovertree.com/texiao/js/9/hovertreedtree.css" type="text/css" /> 6 <script type="text/javascript" src='/images/loading.gif' data-original="http://hovertree.com/texiao/js/9/hovertreedtree.js"></script> 7 <style>body{font-family:'Times New Roman', Times, serif}a{color:black}</style> 8 </head> 9 10 <body>11 12 <h1><a href="http://hovertree.com/">hovertreemenu</a> » <a href="http://hovertree.com/menu/javascript/">JavaScripts</a> » <a href="http://hovertree.com/hvtart/bjae/pmdo4lfd.htm">Tree</a></h1>13 14 <h2>何问起树形菜单</h2>15 16 <div class="dtree">17 18 <p><a href="javascript: hovertreemenu.openAll();">全部展开</a> | <a href="javascript: hovertreemenu.closeAll();">全部收起</a></p>19 20 <script type="text/javascript">21 <!--22 23 var hovertreemenu = new dTree('hovertreemenu');24 25 hovertreemenu.add(0, -1, '何问起树形菜单');26 hovertreemenu.add(1,0,'节点 1','http://hovertree.com');27 hovertreemenu.add(2, 0, '节点 2', 'http://tool.hovertree.com/');28 hovertreemenu.add(3, 1, '节点 1.1', 'http://hovertree.com/hvtart/bjae/pmdo4lfd.htm');29 hovertreemenu.add(4, 0, '节点 3', 'http://hovertree.com/hvtart/bjae/q3etb2qv.htm');30 hovertreemenu.add(5, 3, '节点 1.1.1', 'http://hovertree.com/hvtart/bjae/l59bo21o.htm');31 hovertreemenu.add(6, 5, '节点 1.1.1.1', 'http://hovertree.com/hvtart/bjae/lhnydfey.htm');32 hovertreemenu.add(7, 0, '节点 4', 'http://hovertree.com/hvtart/bjae/k4085k8v.htm');33 hovertreemenu.add(8, 1, '节点 1.2', 'http://hovertree.com/hvtart/bjae/m8wrrmrw.htm');34 hovertreemenu.add(9, 0, '图片', 'http://hovertree.com/hvtimg/', 'Pictures I\'ve taken over the years', '', '', 'http://hovertree.com/texiao/js/9/img/imgfolder.gif');35 hovertreemenu.add(10, 9, '欢迎您！', 'http://hovertree.com/hvtart/bjae/onxw4ahp.htm', 'Pictures of Gullfoss and Geysir');36 hovertreemenu.add(11, 9, '雪花飞舞', 'http://hovertree.com/hvtart/bjae/79mtsd1t.htm');37 hovertreemenu.add(12, 0, '回收站', 'http://hovertree.com/texiao/', '', '', 'http://hovertree.com/texiao/js/9/img/trash.gif');38 39 document.write(hovertreemenu);40 41 //-->42 </script>43 44 </div>45 46 <p><a href="http://hovertree.com/">©何问起</a></p>47 48 </body>49 50 </html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：js无限级树菜单
关键词：JS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
