CSS+HTML+JS实现的的一个树

2019独角兽企业重金招聘Python工程师标准>>>

    
    
    
    
    
    



可以根据自己要求修改css样式点击这里打开窗口



    
        取消

CSS

@charset "utf-8";

.st_tree {
    padding: 10px;
    font-size: 30px;
}

.st_tree a {
    color: #222;
    text-decoration: none;
    font-size: 22px;
}

.st_tree a:hover {
    color: #f33;
    text-decoration: underline;
}

.st_tree ul {
    padding: 0 0 0 18px;
    margin: 0;
}

.st_tree ul li {
    font-size: 13px;
    color: #222;
    line-height: 18px;
    cursor: pointer;
    list-style: none;
    background-repeat: no-repeat;
    padding: 0 0 3px 20px;
}

.st_tree ul li ul {
}

.st_tree ul li ul li {
}

.st_tree .folder {
    list-style-image: url(imgs/st_icon.png);
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
}

.st_tree .open {
    list-style-image: url(imgs/st_icon_open.png);
    background-repeat: no-repeat;
    padding: 0 0 0 20px;
}

.st_tree .hover {
    background-color: #ffa;
}

js

$(function () {
    $.fn.extend({
        SimpleTree: function (options) {
            var option = $.extend({
                click: function (a) {
                }
            }, options);
            option.tree = this;
            option._init = function () {
                this.tree.find("ul ul").hide();
                this.tree.find("ul ul").prev("li").removeClass("open");
                this.tree.find("ul ul[show='true']").show();
                this.tree.find("ul ul[show='true']").prev("li").addClass("open");
            };
            this.find("a").click(function () {
                $(this).parents("li").click();
                return false;
            });
            this.find("li").click(function () {
                var a = $(this).find("a")[0];
                if (typeof(a) != "undefined")
                    option.click(a);
                if ($(this).next("ul").attr("show") == "true") {
                    $(this).next("ul").attr("show", "false");
                } else {
                    $(this).next("ul").attr("show", "true");
                }
                option._init();
            });

            this.find("li").hover(
                function () {
                    $(this).addClass("hover");
                },
                function () {
                    $(this).removeClass("hover");
                }
            );
            this.find("ul").prev("li").addClass("folder");
            this.find("li").find("a").attr("hasChild", false);
            this.find("ul").prev("li").find("a").attr("hasChild", true);
            option._init();
        }
    });
});

转载于:https://my.oschina.net/marjeylee/blog/860448