jquery实现无限级联树(结合div+css)

本文基于jquery来实现无限级联树效果，当然啦，要结合div+css来应用才行。看下面代码吧。
JQTree.CSS:

.Tree{ min-width:200px; min-height:200px; border:silod 1px #ccc; text-align:left; border:dashed 1px #ccc;} .branch{ background:url(../Image/JqueryTreeBranch_01.png) no-repeat; padding-left:30px; display:none; min-height:25px;} .branchon{ background:url(../Image/JqueryTreeBranch_02.png) no-repeat; padding-left:30px; display:none; min-height:25px; border-left:dashed 1px #ccc;} .leaf{ background:url(../Image/JqueryTreeLeaf.png) no-repeat; padding-left:30px; display:none; min-height:25px;}

JQTree.JS:

$(function JQeryTree() { $(function LoadCss() { var Tree = $("#jquerytree"); Tree = Tree.children(); Tree.addClass("Tree"); Tree = Tree.children(); while (Tree.is("div")) { Tree.addClass("leaf"); Tree.children().parent().removeClass("leaf"); Tree.children().parent().addClass("branch"); Tree = Tree.children(); } var FirstBranchs = $(".Tree").children(); FirstBranchs.css("display", "block"); FirstBranchs.css("border", "0"); }); $(function LoadEvent() { $(".branch").click(function() { $(this).children().slideToggle(); $(this).toggleClass("branch"); $(this).toggleClass("branchon"); return false;//阻止冒泡 }); $(".leaf").click(function() { return false;//阻止冒泡 }); }); });

HTML引用时将JQuery库和JQTree.js、JQTree.css引进来，在需要实现树型导航的地方直接写

依然是一层套一层，与多级菜单不同的时多级菜单的每一个级都需要一个列表容器来放置菜单项，而树型导航则不需要，父级是子级的容器。另外，无论是树型导航还是菜单导航，位置都是由用户自己去定义的，如树：

#jquerytree{ position:relative; top:100px; left:100px; width:250px;}

搜索

jquery实现无限级联树(结合div+css)