简单的树结构

 

html：

<div class="m-ydx-tree J-ydx-tree">
    <ul class="u-checkbox-list">
        <li>
            <div class="hover-bg" data-id="123" data-name="中华区"></div>
            <span class="u-triangle u-triangle-left"></span>
            <a href="#" class="check-text">选项一带行高</a>
            <span class="edit-icon J-edit-area" data-id="123" data-name="中华区1"></span>
            <ul>
                <li>
                    <div class="hover-bg cur" data-id="123" data-name="中华区2"></div>
                    <span class="u-triangle u-triangle-left"></span>
                    <a href="#" class="check-text">选项一带行高</a>
                    <ul>
                        <li>
                            <div class="hover-bg" data-id="123" data-name="中华区3"></div>
                            <span class="u-triangle u-triangle-left leaf"></span>
                            <span class="check-text">选项一带行高</span>
                        </li>
                        <li>
                            <div class="hover-bg" data-id="123" data-name="中华区4"></div>
                            <span class="u-triangle u-triangle-left leaf"></span>
                            <span class="check-text">选项一带行高</span>
                        </li>
                        <li>
                            <div class="hover-bg" data-id="123" data-name="中华区5"></div>
                            <span class="u-triangle u-triangle-left leaf leaf"></span>
                            <span class="check-text">选项一带行高</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="hover-bg" data-id="123" data-name="中华区6"></div>
                    <span class="u-triangle u-triangle-left leaf"></span>
                    <span class="check-text">选项一带行高</span>
                </li>
                <li>
                    <div class="hover-bg" data-id="123" data-name="中华区7"></div>
                    <span class="u-triangle u-triangle-left leaf"></span>
                    <span class="check-text">选项一带行高</span>
                </li>
            </ul>
        </li>
        <li>
            <div class="hover-bg" data-id="123" data-name="中华区8"></div>
            <span class="u-triangle u-triangle-left"></span>
            <span class="check-text">选项一带行高</span>
            <span class="edit-icon J-edit-area" data-id="123" data-name="中华区9"></span>
            <ul>
                <li>
                    <div class="hover-bg" data-id="123" data-name="中华区11"></div>
                    <span class="u-triangle u-triangle-left leaf"></span>
                    <span class="check-text">选项一带行高</span>
                </li>
                <li>
                    <div class="hover-bg" data-id="123" data-name="中华区112"></div>
                    <span class="u-triangle u-triangle-left leaf"></span>
                    <span class="check-text">选项一带行高</span>
                </li>
                <li>
                    <div class="hover-bg" data-id="123" data-name="中华区3"></div>
                    <span class="u-triangle u-triangle-left leaf"></span>
                    <span class="check-text">选项一带行高</span>
                </li>
            </ul>
        </li>
    </ul>
</div>

css:

/*u-checkbox-list*/
.u-checkbox-list{line-height:34px;padding:5px;position:relative;}
.u-checkbox-list ul{display:none;}
.u-checkbox-list li{padding-left:15px;cursor:pointer;}
.u-triangle{display:inline-block;width:0;height:0;border-width:6px;border-style:solid;position:relative;z-index:3;}
.u-triangle.leaf{opacity:0;}
.u-triangle-top{border-color:#999 transparent transparent transparent;margin-right:6px;margin-left:-6px;}
.u-triangle-left{border-color:transparent transparent transparent #999;margin-right:2px;margin-left:-2px;}
.u-checkbox-list .check-text{cursor:pointer;position:relative;z-index:3;color:#666;}
.u-checkbox-list .edit-icon{display:inline-block;background:url('../images/edit.png') no-repeat center 0;width:16px;height:16px;margin-left:20px;cursor:pointer;position:relative;z-index:3;}
.hover-bg{width:235px;background:#f8f9fc;position:absolute;left:0;height:34px;z-index:1;}
.hover-bg:hover{background:#e7f4f9!important;}
.hover-bg.cur{background:#e9edf3!important;}

js:

$(".J-ydx-tree").on('click','.u-triangle', function(){
    var _this = $(this),
        tri = _this.siblings('.u-triangle').length>0?_this.siblings('.u-triangle'):_this,
        hoverbg = _this.siblings('.hover-bg').length>0?_this.siblings('.hover-bg'):_this;
    // 选中
    $(".J-ydx-tree").find('.hover-bg.cur').removeClass('cur').css('background','#f8f9fc');
    hoverbg.addClass('cur');
    var areaData = {
        id: hoverbg.data('id'),
        name: hoverbg.data('name')
    };
    console.log(areaData);
    if(tri.hasClass('leaf')){
        return;
    }
    if(tri.hasClass('u-triangle-left')){
        tri.removeClass('u-triangle-left').addClass('u-triangle-top');
        if(tri.parent('li').children('ul').length>0){
            tri.parent('li').children('ul').show();
        }else{
            // 请求下一级，展开和筛选数据是否一起请求
            $.ajax({
                url: '/path/to/file',
                type: 'default GET (Other values: POST)',
                dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
                data: {param1: 'value1'},
            })
            .done(function() {
                console.log("success");
                var str = '';
                // 拼接模板字符串
                _this.parent('li').append($(str));
            })
            .fail(function() {
                console.log("error");
            });
        }
    }else{
        tri.removeClass('u-triangle-top').addClass('u-triangle-left')
        .parent('li').children('ul').hide();
    }
})
$(".J-ydx-tree .check-text,.J-ydx-tree .u-triangle,.J-ydx-tree .edit-icon").hover(function() {
    if($(this).siblings('.hover-bg').hasClass('cur')){return;}
    $(this).siblings('.hover-bg').css('background','#e7f4f9');
}, function() {
    if($(this).siblings('.hover-bg').hasClass('cur')){return;}
    $(this).siblings('.hover-bg').css('background','#f8f9fc');
});

 images:

利用绝对定位不写top默认和父级顶部对齐