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引进来，在需要实现树型导航的地方直接写

 

<div id="jquerytree"><div>

<div>一级菜单

<div>二级菜单

<div>三级菜单</div>

</div>

</div>

</div></div>

 

 

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

 

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