jquery 初步实现树形菜单
先上图：
贴代码：
ul2tree.html
/*** 将ul结构转化为树形菜单函数* 待解决问题：* 1 列表最后一个线形图改为 L 形* 2 可以选择带连接线或者不带连接线* 3 增加文字点击函数* 4 */$.extend({ul2tree:function(opt,callback){// 默认参数this.defaults = {obj :"",forderOpen :"images/folderOpen.gif", // 打开的文件夹图片forderClosed :"images/folderClosed.gif", // 关闭的文件夹图片fileImg :"images/leaf.gif", // 文件图片img_width :"18px",line_height :"18px", // 行高font_size :"12px"};//参数初始化var opts = $.extend(this.defaults,opt);// ul样式初始化$(opts.obj).css({"list-style-type":"none","padding-left":"0px"});// 添加文件夹及文件图片$(opts.obj).find("li").each(function(){$(this).css({"height":opts.line_height,"line-height":opts.line_height,"font-size":opts.font_size});if($(this).next().children().size() > 0){$(this).prepend("<img src=\"" + opts.forderOpen + "\" />");// 展开关闭$(this).find("img[src='" + opts.forderOpen + "']:last").click(function(){if($(this).attr("src")==opts.forderClosed){$(this).attr("src",opts.forderOpen);$(this).parent().next().css({"display":"block","visibility":"visible"});}else{$(this).parent().next().css({"display":"none","visibility":"hidden"});$(this).attr("src",opts.forderClosed);}});}else{$(this).prepend("<img src=\"" + opts.fileImg + "\" />");}});// 增加线条$(opts.obj).find("ul").each(function(){$(this).find("li").each(function(){$(this).prepend("<img src=\"images/line3.gif\" />");if($(this).next().size == 0){alert("");$(this).prepend("<img src=\"images/line2.gif\" />");}});});// 处理线条$(opts.obj).find("li").each(function(){var img_size = $(this).find("img").size();//alert(img_size);if(img_size >= 0){for(var i = 0; i < img_size - 2; i++){$(this).find("img:eq(" + i + ")").attr("src","images/line1.gif");}}});}});文件下载：http://download.csdn.net/detail/blatar/4709713