<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <mce:style type="text/css"><!-- p{ font-family:arial; } a{ color:#000; font-family:arial; font-size:0.8em; } .dhtmlgoodies_tree{ margin:0px; padding:0px; } .dhtmlgoodies_tree ul{ margin-left:20px; padding-left:0px; display:none; } .dhtmlgoodies_tree li{ list-style-type:none; vertical-align:middle; } .dhtmlgoodies_tree li a{ color:#000; text-decoration:none; font-family:arial; font-size:0.8em; padding-left:2px; } --></mce:style><style type="text/css" mce_bogus="1"> p{ font-family:arial; } a{ color:#000; font-family:arial; font-size:0.8em; } .dhtmlgoodies_tree{ margin:0px; padding:0px; } .dhtmlgoodies_tree ul{ margin-left:20px; padding-left:0px; display:none; } .dhtmlgoodies_tree li{ list-style-type:none; vertical-align:middle; } .dhtmlgoodies_tree li a{ color:#000; text-decoration:none; font-family:arial; font-size:0.8em; padding-left:2px; }</style> <mce:script type="text/javascript"><!-- var nodeId = 1; var imageFolder = 'images/'; //图片路径 var plusImage = 'dhtmlgoodies_plus.gif'; var folderImage = 'dhtmlgoodies_folder.gif'; var minusImage = 'dhtmlgoodies_minus.gif'; var treeUlCounter = 0; window.onload = function(){var i = new init();i.initTree();}; function init(){}; //初始化函数 init.prototype = { //init原型方法 $:function(id){return typeof id == 'string'?document.getElementById(id):'';}, $this:function(){return new init();}, $byTagName:function(elm,tag){ tag = typeof tag == 'string'?tag:'*'; return elm.getElementsByTagName(tag); }, initTree:function(){ //加载方法,生成img,并绑定事件 var idOfFolderTrees = ['dhtmlgoodies_tree2']; for(var treeCounter = 0; treeCounter < idOfFolderTrees.length; treeCounter++){ var dhtmlgoodies_tree = this.$(idOfFolderTrees[treeCounter]); var menuItems = this.$byTagName(dhtmlgoodies_tree,'li'); var that = this; for(var no = 0; no < menuItems.length; no++){(function(){ nodeId++; var subItems = that.$byTagName(this,'ul'); var img = document.createElement('img'); img.src = imageFolder + plusImage; img.onclick = that.showHideNode; if(subItems.length == 0)img.style.visibility='hidden';else{ subItems[0].id = 'tree_ul_' + treeUlCounter; treeUlCounter++; } var aTag = that.$byTagName(this,'a')[0]; aTag.onclick = that.showHideNode; this.insertBefore(img,aTag); if(!this.id)this.id = 'dhtmlgoodies_treeNode' + nodeId; var folderImg = document.createElement('img'); if(this.className){ folderImg.src = imageFolder + this.className; }else{ folderImg.src = imageFolder + folderImage; } this.insertBefore(folderImg,aTag); }).call(menuItems[no])}; } }, //显示隐藏方法 showHideNode:function(e,inputId){var that = function(){return init.prototype.$this.call();}();(function(){ var thisNode = this; if(thisNode.tagName == 'A'){ thisNode = that.$byTagName(this.parentNode,'img')[0]; } if(thisNode.style.visibility=='hidden')return; var parentNode = thisNode.parentNode; inputId = parentNode.id.replace(/[^0-9]/g,''); if(thisNode.src.indexOf(plusImage)>=0){ //显示树节点 thisNode.src = thisNode.src.replace(plusImage,minusImage); var ul = that.$byTagName(parentNode,'ul')[0]; ul.style.display = 'block'; }else{ //隐藏树节点 thisNode.src = thisNode.src.replace(minusImage,plusImage); that.$byTagName(parentNode,'ul')[0].style.display = 'none'; } }).call(this)} }; // --></mce:script> </head> <body> <p>Static tree</p> <ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree"> <li><a href="#" mce_href="#" id="node_100">Europe</a> <ul> <li><a href="#" mce_href="#" id="node_101">Norway</a> <ul> <li><a href="#" mce_href="#" id="node_102">Rogaland</a> <ul> <li class="dhtmlgoodies_sheet.gif"><a href="#" mce_href="#" id="node_103">Stavanger</a></li> <li class="dhtmlgoodies_sheet.gif"><a href="#" mce_href="#" id="node_104">Haugesund</a></li> </ul> </li> <li class="dhtmlgoodies_sheet.gif"><a href="#" mce_href="#" id="node_105">Hordaland</a></li> <li class="dhtmlgoodies_sheet.gif"><a href="#" mce_href="#" id="node_106">Oslo</a></li> </ul> </li> <li><a href="#" mce_href="#" id="node_107">United Kingdom</a> <ul> <li><a href="#" mce_href="#" id="node_108">London</a></li> <li><a href="#" mce_href="#" id="node_109">Manchester</a></li> <li><a href="#" mce_href="#" id="node_110">Oxford</a></li> </ul> </li> <li><a href="#" mce_href="#" id="node_111">Sweden</a></li> <li><a href="#" mce_href="#" id="node_112">Denmark</a></li> <li><a href="#" mce_href="#" id="node_113">Germany</a></li> </ul> </li> </ul> </body> </html>      

页面中用的的图片:

我已经上传,下载完放在images文件夹下.

http://p.blog.csdn.net/images/p_blog_csdn_net/MuBeiBei/EntryImages/20090930/dhtmlgoodies_folder.gif

http://p.blog.csdn.net/images/p_blog_csdn_net/MuBeiBei/EntryImages/20090930/dhtmlgoodies_minus.gif

http://p.blog.csdn.net/images/p_blog_csdn_net/MuBeiBei/EntryImages/20090930/dhtmlgoodies_plus.gif

http://p.blog.csdn.net/images/p_blog_csdn_net/MuBeiBei/EntryImages/20090930/dhtmlgoodies_sheet.gif