JavaScript实现的经典文件树菜单效果

本文实例讲述了Java脚本语言实现的经典文件树菜单效果。分享给大家供大家参考。具体如下：

这是一款简单的Java脚本语言文件树菜单，经典的树形菜单，特别是文件夹的样式比较经典，折叠和展开也很流畅自然，不过本款菜单有一个缺点，就是菜单的数据写在射流研究…的数组里，这样一来多多少少对菜单内容的修改造成一定麻烦。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-file-tree-style-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题简单的文件树效果/title meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style type=' text/CSS ' .树{ width:200pxborder:2px插图# fff高度：400 pxpadding:5px飞越：汽车；}.树dd ,树dt .树dl {边际：0划水：0;飞越：隐藏；}.树DD {左边距：18 px}.树dt {背景： URL(图片/树-BG。png)无重复0 0px左填充左：35px行高：20px高度：20 px}.树dt。节点-关闭{背景-位置： 0-24px；}.树dt。节点-打开{背景-位置： 0-58px；}.树dt a { color: # 000文本装饰：无；font : 12px/1 verdana；行高：12px_行高：16px}。树dt a :悬停{背景： # 0a 246 a；color : # fff }/style/head dydiv id=' esunTree ' class=' tree '/div/body script type=' text/JavaScript ' try { document。exec命令(' background imagecache '，false，true)} catch(e){ }；function Tree(data，el) { this.app=function(par，tag){ return par。appendchild(文档。createelement(标记))}；这个。创建(文档。getelementbyid(El)，data)}；树。fn=树。prototype={ create : function(par，group){ var host=this，length=group . length for(var I=0；一、长度；i ) { var dl=this.app(par，' dl ')，dt=this.app(dl，' dt ')，dd=this.app(dl，' DD ')；dt。inner html=' a href=' JavaScript : void(0)' ' group[I][' t ']'/a '；if(！组[i]['s'])继续；dt。group=group[I][' s ']；dt。类名=' node-close '；dt。onclick=function(){ var DD=this。下一个兄弟姐妹；if(！DD。haschildnodes()){ host。创建(DD，这个。组)；这个。类名=' node-open ' } else { var set=DD。风格。display==' none '？[' '，' node-open']:['none '，' node-close ']；DD。风格。display=set[0]；这个。类名=set[1]} } } } }；定义变量数据=[{ t: '腾讯网络限公司，s:[ {t: '人力资源，s:[{t: '张A'}]}，{t: '风险控制，s:[{t: '李B'}，{t: '赵C'}，{t: '吴D'}，{t: '司马E'}，{t: '潭F'}，{t: '袁G'}]}，{t: '系统平台，s:[{t: '资讯组，s:[{t: '王五}]}，{t: '游戏组，s:[{t: '肖十三}]}]} ] }，{t: '拍拍网，s:[{t: '胡一刀}]}，{t: '盛大网络，s:[{t: '热血传奇，s:[{t: '在线充值}]}，{t: '陈天桥}]}，{t: '新浪微博，s:[{t: '凤姐'}]}];var et=新树（数据，'电子合同');//]]/脚本/html希望本文所述对大家的Java脚本语言程序设计有所帮助。