拖延了三四天才把這個(gè)樹(shù)狀圖搞出來(lái).......果然拖延癥需要治療（。
目的：多級(jí)樹(shù)狀圖
需求：
- 點(diǎn)擊某一級(jí)成員可將他的下一級(jí)顯示；
- 多級(jí)顯示；
- 可左右拖動(dòng)；
- 結(jié)構(gòu)以u(píng)l+li+a爲(wèi)主。
嘗試1：浮動(dòng)佈局
HTML
<!-- 樹(shù)狀圖 start -->
<div class="tree-main" id="tree">
<ul class="clearfix">
<li class="one">
<!-- 第一層 start-->
<a class="" href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<!-- 第一層 end-->
<!-- 第二層 start-->
<ul class="two">
<li>
<a class="" href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<!-- 第三層 start-->
<ul class="default">
<li>
<a class="" href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<!-- 第四層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<!-- 第五層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
</ul>
<!-- 第五層 end-->
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<!-- 第五層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<!-- 第六層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
</ul>
<!-- 第六層 end-->
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
</ul>
</li>
</ul>
<!-- 第五層 end-->
</li>
</ul>
<!-- 第四層 end-->
</li>
<li>
<a class="" href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
</ul>
<!-- 第三層 end-->
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
<!-- 第三層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠(chéng)</div>
</div>
<div class="count">
<div class="title">
<span>數(shù)字</span>
<span>數(shù)字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點(diǎn)擊查看</div>
</a>
</li>
</ul>
<!-- 第三層 end-->
</li>
</ul>
<!-- 第二層 end-->
</li>
</ul>
</div>
<!-- 樹(shù)狀圖 end -->
如果采取浮動(dòng)的話，將li設(shè)爲(wèi)float:left即可，效果如下：
但是會(huì)出現(xiàn)兩個(gè)問(wèn)題：
- 整個(gè)樹(shù)狀圖無(wú)法居中
- 多級(jí)顯示后，當(dāng)前寬度超出固定寬度或自適應(yīng)時(shí)，浮動(dòng)佈局無(wú)法強(qiáng)制拓寬寬度，會(huì)出現(xiàn)下面的情況：
原本是用jQuery，每次點(diǎn)擊成員展開(kāi)下級(jí)后給寬度增加80px，并且給當(dāng)前div一個(gè)最小寬度，這樣自適應(yīng)或是寬度超出時(shí)，樹(shù)狀圖將會(huì)自動(dòng)拓展。但是還是無(wú)法解決居中問(wèn)題。
嘗試2：Flex
將浮動(dòng)佈局換做Flex彈性佈局
SCSS
.tree-main{
background-color: #fff;
& ul{
position: relative;
padding-top: 20px;
padding-left: 0;
list-style: none;
}
& li{
position: relative;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-right: 5px;
padding-left: 5px;
text-align: center;
list-style: none;
& ul::before{
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 1px solid #94a0b4;
width: 0;
height: 20px;
}
& ul li{
&::before, &::after{
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 1px solid #94a0b4;
width: 51%;
height: 20px;
}
&::after{
right: auto;
left: 50%;
border-left: 1px solid #94a0b4;
}
&:first-child::before, &:last-child::after{
border:0;
}
&:first-child::after{
border-top-left-radius: 5px;
}
&:last-child::before{
border-right: 1px solid #94a0b4;
border-top-right-radius: 5px;
}
}
}
& a{
position: relative;
display: inline-block;
width: 180px;
text-decoration: none;
word-wrap: break-word;
line-height: 25px;
& .info{
height: 46px;
padding-top: 5px;
color: #fff;
border-bottom: 1px #ddd solid;
line-height: 18px;
&.green{
background-color: #449d44;
}
&.blue{
background-color: #31B0D5;
}
}
& .count{
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;
& .title{
height: auto;
border-bottom: 1px #ddd solid;
background-color: #f1f1f1;
}
& .number{
background-color: #fff;
}
& span{
display: inline-block;
width: 48%;
color: #333;
}
}
& .update{
color: #f25b57;
border: 1px #ddd solid;
background-color: #f1f1f1;
}
}
& .two{
display: flex;
& >li{
justify-content: center;
display: inline;
flex-grow: 1;
}
}
& .default{
display: none;
}
& .active{
& +.default{
display:flex!important;
& li{
justify-content: center;
display: flex;
flex-grow:1;
}
}
}
}
jQuery
/**
* 思路：
* 1、在第一次打開(kāi)后就將所有數(shù)據(jù)載入，但只顯示兩級(jí)，其他用display:none隱藏;
* 2、在點(diǎn)擊成員時(shí)，做出判斷：(1)該成員是否有下級(jí)(2)下級(jí)是否展開(kāi);
* 3、若成員無(wú)下級(jí)，則彈出提示；若下級(jí)已經(jīng)展開(kāi)，則收起。
*/
$(function(){
$("#tree a").click(function(){
var _this = $(this);
if( _this.hasClass("active") ){
_this.removeClass("active");
}else if(!_this.siblings("ul").length){
alert("該會(huì)員沒(méi)有下級(jí)");
}else{
$(this).addClass("active");
$(this).parent("li").css("display","inline");
}
});
});
效果如下：
360瀏覽器 極速模式，火狐瀏覽器，UC瀏覽器
儅寬度縮小后出現(xiàn)滾動(dòng)條
但是這樣有個(gè)比較坑的是：
寬度縮小后，第一層移位
待解決......
2017年3月25日 第一次編輯 僅供個(gè)人新手學(xué)習(xí)使用
