Jquery树形菜单的实现

jQuey这个东西很好很强大，用jQuery操作DOM简直是易如反掌。这不，刚才icemapro小弟给我留言，希望我能写一个jQuery的树形菜单，在强大的就Query的帮助下，仅仅花了大约10分钟就完成了，其中还有大约7分钟在考虑css的问题，所以熟悉jquery可是对你很有帮助的哦，废话不多说，下面发布代码，讲解方式依然在注释中体现：
菜单的html代码如下，你可以根据需要进行扩展：

storyday.com
第一级目录

iceman
第2级目录
第2级目录

第3级目录
第3级目录




cosbeta
生活点滴
江东

我想上面的html代码应该不用解释了吧，否则这篇文章你也没有看得必要了哈，下面是css的实现，其实css是最难搞的，目前搞定是实现目录式树形，其他树状也是很简单的，无非就是改变一下css

 a:link,a:visited{font-size:12px;
color:#094477;text-decoration:none;
}
a:link:hover,a:visited:hover{
color:#000cf;text-decoration:underline;
}
ul.folder{padding:0;margin:0;list-style:none;/*重置ul的margin和padding，否则打死都无法兼容FF和IE*/}
li.folder{
background:#fff url(folderbg.png) no-repeat 0 0;padding:0px 0 0px 14px;
margin:0 2px;
text-indent:20px;
/*folder背景，目前放到是windows目录背景，如果是其他树形，用其他背景图片替代即可*/
}
li.folder-op{background:#fff url(folderbg-op.png) no-repeat 0 0;}
.disnone{
display:none;
}/*这是一个公共的css class，表示隐藏该元素*/

下面开始介绍重点，那就是js的实现，可能这个重点会让你失望，毕竟代码才那么简单的几行，当然在运用jquery之前肯定是要引入jquery库文件的，本例子中直接引用的本blog（生活点滴）中的jquery库：

下面是js代码，解释依然在注释中：

function Exp(obj){
		var html_element = $(obj).parent('.folder');/*获取当前点击的父dom，在本例子中获取的dom节点将是 “第一级目录所在的li.folder”*/
		var sub_element =  $(html_element).children(".folder"); ;/*根据当前的父dom，获取本级的子dom*/
		if( html_element.attr('class').indexOf('folder-op') != -1 ){
/*css class .folder-op表示当前已经展开的类，如果展开，则前面的+背景变成-背景，具体可以在后面的例子中看到
如果class中含有该类，则表示当前已经展开，所以下面的两行的任务是：1.隐藏该目录，2.remove掉此css class
*/
			html_element.removeClass('folder-op');
			sub_element.hide();
			}
			else{
/*否则，添加表示目录已经展开的类，展示该目录*/
			html_element.addClass('folder-op');
			sub_element.show(500);
			}
		}

对，对于js就只需要上面的几行，太简单了，对吧,下面是例子：

上面例子中包含文件有：tree-jquery！
有些细节是在css中控制的，所以如果你需要其他样式请自行修改css，如下面的另外一个例子：（例子中的虚线不完美，特别没个分支最后的那一行, 所以，在css的运用上发挥你的聪明才智吧）：

————end————————