javascript jquery 写的树形菜单

在网上看到一个流行的dtree代码，看了一下，数据都是直接封装在js中，新增列表数据放在哪一层里都是手动添加的，感觉要是维护的话，还是有一点点麻烦，所以就自己写了一个。样式截图如下：

以下是html的代码段，大家可以很清楚的看清它的层级关系，这里我就不多说了，关于每个li的class是可以省略不写的。

<div class="faa_tree">
	<ul>
   	  <li class="layer01"><span>我是第一层1</span>
        <ul>
        	<li class="layer02"><span>我是第二层</span>
            	<ul>
                	<li class="layer03"><span>我是第三层08</span>
                    </li>
                    <li class="layer03"><span>我是第三层09</span>
                    </li>
                    <li class="layer03"><span>我是第三层000</span>
                    </li>
                </ul>
            </li>
            <li class="layer02"><span>我是第二层02</span>
            	<ul>
                	<li class="layer03"><span>我是第三层sdfs08</span>
                    	<ul>
                        	<li class="layer04"><span><a target="_blank" href="www.baidu.com">我是第四层01</a></span>
                            	<ul>
                                	<li class="layer05"><span>我是第五层01</span>
                                    </li>
                                </ul>
                            	
                            </li>
                        </ul>
                    </li>
                    <li class="layer03"><span>我是第三层dfsd09</span>
                    </li>
                    <li class="layer03"><span>我是第三层sfdsf000</span>
                    </li>
                </ul>
            </li>
        </ul>
        </li>
        <li class="layer01"><span>我是第一层2</span>
        </li>
        <li class="layer01"><span>我是第一层3</span>
        	<ul>
            	<li><span><a href="www.baidu.com" target="_blank">我是第二层</a></span>
                </li>
            </ul>
        </li>
    </ul>
</div>

 以下是css代码段

@charset "utf-8";
/* CSS Document edit by faa*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form, table { margin:0; padding:0; border:0; list-style:none;}
div, span, h1, h2, h3, h4, h5, h6, p, a, img, dl, dt, dd, ol, ul, li, form { overflow:hidden;}
input { margin:0; padding:0; }
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
a,area{blr:expression(this.onFocus=this.blur())}
a { text-decoration:none;}
a:hover { text-decoration:underline;}
.boxcenter { margin:0 auto;}

body{ font-size:12px;}

.faa_tree li{margin-left:0px;line-height:12px;}
.faa_tree>ul>li ul{display:none;}
.faa_tree span{}
.faa_tree img{position:relative;}
.faa_tree img,.faa_tree span{vertical-align:text-bottom;}/* 这个属性是控制img和span水平对齐的*/

 以下是js代码段

// JavaScript Document edit by faa
function icons (){//定义的图标
	this.folder="<img src='images/folder.gif'  />";
	this.empty="<img src='images/empty.gif' />";
	this.folderopen="<img src='images/folderopen.gif' />";
	this.join="<img src='images/join.gif' />";
	this.joinbottom="<img src='images/joinbottom.gif' />";
	this.line="<img src='images/line.gif' />";
	this.minus="<img src='images/minus.gif' />";
	this.minusbottom="<img src='images/minusbottom.gif' />";
	this.page="<img src='images/page.gif' />";
	this.plus="<img src='images/plus.gif' class='fold' />";
	this.plusbottom="<img src='images/plusbottom.gif' class='fold' />";
	}
var icons=new icons();
function initTree(){
	$(".faa_tree li span").parent().has("ul").each(function(){//添加文件夹的图标
		if($(this).index()==($(this).parent().children().length)-1){//当这个文件夹是底部节点的时候
			$(this).prepend(icons.plusbottom+icons.folder);
				for(var i=0;i<$(this).parents("li").length;i++){//parents()获取的是所有父栏目，从最近的父栏目开始，而prepend每次就都往前插，所以也是从最近的地方像远处插入竖线或空白，所以要从小到大的按照顺序的放,这个是添加竖线的代码
				if($(($(this).parents("li"))[i]).next().html()==null){
					$(this).prepend(icons.empty);
					}
					else{
				$(this).prepend(icons.line);}
				}

			}
		else{//当这个文件夹不是底部节点的时候
			$(this).prepend(icons.plus+icons.folder);
			for(var i=0;i<$(this).parents("li").length;i++){
				if($(($(this).parents("li"))[i]).next().html()==null){
					$(this).prepend(icons.empty);
					}
					else{
				$(this).prepend(icons.line);}
				}
			}
		});
	$(".faa_tree li span").parent().not($(".faa_tree li span").parent().has("ul")).each(function(){//添加单页的图标
		if($(this).index()==$(this).parent().children().length-1){//当这个单页图标是底部节点的时候
			$(this).prepend(icons.joinbottom+icons.page);
			for(var i=0;i<$(this).parents("li").length;i++){
				if($(($(this).parents("li"))[i]).next().html()==null){
					$(this).prepend(icons.empty);
					}
					else{
				$(this).prepend(icons.line);}
				}
			}
		else{//当这个单页不是底部节点的时候
			$(this).prepend(icons.join+icons.page);
			for(var i=0;i<$(this).parents("li").length;i++){
				if($(($(this).parents("li"))[i]).next().html()==null){
					$(this).prepend(icons.empty);
					}
					else{
				$(this).prepend(icons.line);}
				}
			}
		});
	}

$(document).ready(function(){
	initTree();
	$(".faa_tree li .fold").click(function(e){//给folder图标加点击事件
		if($(this).parent().children("ul").css("display")=="none"){
		$(this).parent().children("ul").css("display","block");
		$(this).next().attr("src","images/folderopen.gif");
		if($(this).attr("src")=="images/plus.gif"){
		$(this).attr("src","images/minus.gif");}
		else{
		$(this).attr("src","images/minusbottom.gif");
			}
		}
		else{$(this).parent().children("ul").css("display","none");
		$(this).next().attr("src","images/folder.gif");
		if($(this).attr("src")=="images/minus.gif"){
		$(this).attr("src","images/plus.gif");}
		else{
		$(this).attr("src","images/plusbottom.gif");}
			}
		
		});
	});

 大家自行下载附件吧