來自于一個坑爹的多級樹狀圖

拖延了三四天才把這個樹狀圖搞出來.......果然拖延症需要治療（。

---

目的：多級樹狀圖

需求：

• 點擊某一級成員可將他的下一級顯示；
• 多級顯示；
• 可左右拖動；
• 結構以ul+li+a爲主。

嘗試1：浮動佈局

HTML

    

        

            
            
                

                    
ID:54884894
                    
陳臣誠
                
                

                    

                        數字
                        數字
                    
                    

                        948745.00
                        452.00
                    
                
                
點擊查看
            
            
            
            

                

                    
                        

                            
ID:54884894
                            
陳臣誠
                        
                        

                            

                                數字
                                數字
                            
                            

                                948745.00
                                452.00
                            
                        
                        
點擊查看
                    
                    
                    

                        

                            
                                

                                    
ID:54884894
                                    
陳臣誠
                                
                                

                                    

                                        數字
                                        數字
                                    
                                    

                                        948745.00
                                        452.00
                                    
                                
                                
點擊查看
                            
                            
                            

                                

                                    
                                        

                                            
ID:54884894
                                            
陳臣誠
                                        
                                        

                                            

                                                數字
                                                數字
                                            
                                            

                                                948745.00
                                                452.00
                                            
                                        
                                        
點擊查看
                                    
                                    
                                    

                                        

                                            
                                                

                                                    
ID:54884894
                                                    
陳臣誠
                                                
                                                

                                                    

                                                        數字
                                                        數字
                                                    
                                                    

                                                        948745.00
                                                        452.00
                                                    
                                                
                                                
點擊查看
                                            
                                        
                                        

                                            
                                                

                                                    
ID:54884894
                                                    
陳臣誠
                                                
                                                

                                                    

                                                        數字
                                                        數字
                                                    
                                                    

                                                        948745.00
                                                        452.00
                                                    
                                                
                                                
點擊查看
                                            
                                        
                                    
                                    
                                
                                

                                    
                                        

                                            
ID:54884894
                                            
陳臣誠
                                        
                                        

                                            

                                                數字
                                                數字
                                            
                                            

                                                948745.00
                                                452.00
                                            
                                        
                                        
點擊查看
                                    
                                    
                                    

                                        

                                            
                                                

                                                    
ID:54884894
                                                    
陳臣誠
                                                
                                                

                                                    

                                                        數字
                                                        數字
                                                    
                                                    

                                                        948745.00
                                                        452.00
                                                    
                                                
                                                
點擊查看
                                            
                                            
                                            

                                                

                                                    
                                                        

                                                            
ID:54884894
                                                            
陳臣誠
                                                        
                                                        

                                                            

                                                                數字
                                                                數字
                                                            
                                                            

                                                                948745.00
                                                                452.00
                                                            
                                                        
                                                        
點擊查看
                                                    
                                                
                                                

                                                    
                                                        

                                                            
ID:54884894
                                                            
陳臣誠
                                                        
                                                        

                                                            

                                                                數字
                                                                數字
                                                            
                                                            

                                                                948745.00
                                                                452.00
                                                            
                                                        
                                                        
點擊查看
                                                    
                                                
                                            
                                            
                                        
                                        

                                            
                                                

                                                    
ID:54884894
                                                    
陳臣誠
                                                
                                                

                                                    

                                                        數字
                                                        數字
                                                    
                                                    

                                                        948745.00
                                                        452.00
                                                    
                                                
                                                
點擊查看
                                            
                                            

                                                

                                                    
                                                        

                                                            
ID:54884894
                                                            
陳臣誠
                                                        
                                                        

                                                            

                                                                數字
                                                                數字
                                                            
                                                            

                                                                948745.00
                                                                452.00
                                                            
                                                        
                                                        
點擊查看
                                                    
                                                
                                                

                                                    
                                                        

                                                            
ID:54884894
                                                            
陳臣誠
                                                        
                                                        

                                                            

                                                                數字
                                                                數字
                                                            
                                                            

                                                                948745.00
                                                                452.00
                                                            
                                                        
                                                        
點擊查看
                                                    
                                                
                                            
                                        
                                    
                                    
                                
                            
                            
                        
                        

                            
                                

                                    
ID:54884894
                                    
陳臣誠
                                
                                

                                    

                                        數字
                                        數字
                                    
                                    

                                        948745.00
                                        452.00
                                    
                                
                                
點擊查看
                            
                        
                    
                    
                
                

                    
                        

                            
ID:54884894
                            
陳臣誠
                        
                        

                            

                                數字
                                數字
                            
                            

                                948745.00
                                452.00
                            
                        
                        
點擊查看
                    
                    
                    

                        

                            
                                

                                    
ID:54884894
                                    
陳臣誠
                                
                                

                                    

                                        數字
                                        數字
                                    
                                    

                                        948745.00
                                        452.00
                                    
                                
                                
點擊查看
                            
                        
                        

                            
                                

                                    
ID:54884894
                                    
陳臣誠
                                
                                

                                    

                                        數字
                                        數字
                                    
                                    

                                        948745.00
                                        452.00
                                    
                                
                                
點擊查看
                            
                        
                    
                    
                
            
            
        
    

如果采取浮動的話，將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日 第一次編輯 僅供個人新手學習使用