來自于一個坑爹的多級樹狀圖
2017-03-25 本文已影响0人
SA_Arthur
拖延了三四天才把這個樹狀圖搞出來.......果然拖延症需要治療（。
目的：多級樹狀圖
需求：
- 點擊某一級成員可將他的下一級顯示；
- 多級顯示；
- 可左右拖動；
- 結構以ul+li+a爲主。
嘗試1：浮動佈局
HTML
<!-- 樹狀圖 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">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<!-- 第一層 end-->
<!-- 第二層 start-->
<ul class="two">
<li>
<a class="" href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<!-- 第三層 start-->
<ul class="default">
<li>
<a class="" href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<!-- 第四層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<!-- 第五層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
</ul>
<!-- 第五層 end-->
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<!-- 第五層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<!-- 第六層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
</ul>
<!-- 第六層 end-->
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</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">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
</ul>
<!-- 第三層 end-->
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
<!-- 第三層 start-->
<ul class="default">
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
<li>
<a href="#">
<div class="info green">
<div class="id">ID:54884894</div>
<div class="name">陳臣誠</div>
</div>
<div class="count">
<div class="title">
<span>數字</span>
<span>數字</span>
</div>
<div class="number">
<span>948745.00</span>
<span>452.00</span>
</div>
</div>
<div class="update">點擊查看</div>
</a>
</li>
</ul>
<!-- 第三層 end-->
</li>
</ul>
<!-- 第二層 end-->
</li>
</ul>
</div>
<!-- 樹狀圖 end -->
如果采取浮動的話，將li設爲float:left即可，效果如下：
但是會出現兩個問題：
- 整個樹狀圖無法居中
- 多級顯示后，當前寬度超出固定寬度或自適應時，浮動佈局無法强制拓寬寬度，會出現下面的情況：
原本是用jQuery，每次點擊成員展開下級后給寬度增加80px，并且給當前div一個最小寬度，這樣自適應或是寬度超出時，樹狀圖將會自動拓展。但是還是無法解決居中問題。
嘗試2：Flex
將浮動佈局換做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、在第一次打開后就將所有數據載入，但只顯示兩級，其他用display:none隱藏;
* 2、在點擊成員時，做出判斷：(1)該成員是否有下級(2)下級是否展開;
* 3、若成員無下級，則彈出提示；若下級已經展開，則收起。
*/
$(function(){
$("#tree a").click(function(){
var _this = $(this);
if( _this.hasClass("active") ){
_this.removeClass("active");
}else if(!_this.siblings("ul").length){
alert("该会员没有下级");
}else{
$(this).addClass("active");
$(this).parent("li").css("display","inline");
}
});
});
效果如下：
360瀏覽器 極速模式，火狐瀏覽器，UC瀏覽器
儅寬度縮小后出現滾動條
但是這樣有個比較坑的是：
寬度縮小后，第一層移位
待解決......
2017年3月25日 第一次編輯 僅供個人新手學習使用
