游戏首页树状图html,index.html

Document

src="http://thirdwx.qlogo.cn/mmopen/vi_32/0YdGwH6MaqJAEUDlnQ7icCTZSBiaUCW7OOtcAozGRLRGPTSEAaDMCfwtALO5dyZiclGCIRauaYjgawnHzyxhSkuwA/132"

alt="">

会员

姓名姓名姓名姓名

let url = 'http://thirdwx.qlogo.cn/mmopen/vi_32/0YdGwH6MaqJAEUDlnQ7icCTZSBiaUCW7OOtcAozGRLRGPTSEAaDMCfwtALO5dyZiclGCIRauaYjgawnHzyxhSkuwA/132';

function del(img) {

$(img).parent().parent().parent().nextAll().remove();

$(img).parent().parent().siblings().children(".right-line").css('display','none');

$(img).parent().parent().siblings().children(".open").children('img').css('display','block');

$(img).css('display', 'none');

$(img).parent().siblings(".right-line").css('display','block');

let top = $(img).parent().offset().top - 40;

let column = "

" +

"

"

$('.frame').append(column);

let arr = [{ id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }, { id: 1, level: '会员', name: '姓名', headImg: url, children: true }];

for (let i = 0; i < arr.length; i++) {

let item = "

" +

"

"

"

"" +

"

" +

"

" + arr[i].level + "

" +

"

" + arr[i].name + "

" +

"

" +

"

" +

"" +

"

"

$(".frame>.column:last-child").append(item);

}

}

* {

padding: 0;

margin: 0;

}

.frame {

display: flex;

padding: 40px;

}

.frame>.column:first-child>.item>.left-line {

display: none;

}

.frame>.column:first-child>.item>.left-bottom-line {

display: none;

}

.column {

padding-left: 50px;

min-width: auto;

flex-shrink: 0

}

.frame>.column:first-child {

padding-left: 0;

}

.frame>.column:last-child{

padding-right: 60px;

}

.column>.item:last-child>.left-bottom-line {

display: none;

}

.item {

display: flex;

padding-bottom: 20px;

position: relative;

}

.item>.left-line {

position: absolute;

width: 30px;

height: 2px;

background: #c9c9c9;

left: -30px;

top: 30px;

}

.item>.left-bottom-line {

position: absolute;

width: 2px;

height: 80px;

background: #c9c9c9;

left: -30px;

top: 30px;

}

.item>.right-line {

position: absolute;

width: 50px;

height: 2px;

background: #c9c9c9;

right: -20px;

top: 30px;

display: none;

}

.item>.head-img {

width: 60px;

height: 60px;

}

.item>.cont {

display: flex;

flex-direction: column;

justify-content: center;

font-size: 15px;

margin: 0 15px;

flex-shrink: 0;

}

.item>.cont>.level {

color: #999;

}

.item>.cont>.name {}

.item>.open {

display: flex;

align-items: center;

width: 20px;

}

.item>.open>img {

width: 20px;

height: 20px;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史