原生javaScript+jquery实现四级联动。

html 代码结构：

 <div style="width:1325px;position: relative;" class="header_data">
             
         <ul class="section-top1">
                            <li class="top-li top-li-one">
                                <p class="namp">管理员</p>
                                <a href="#"><i class="iconfont"></i></a>
                            </li>
                            <ul class="section-top-display section-id-one" style="display: none;">
                               
                            </ul>
        </ul>
         <ul class="section-top1">
                            <li class="top-li top-li-one">
                                <p class="namp">品牌商</p>
                                <a href="#"><i class="iconfont"></i></a>
                            </li>
                            <ul class="section-top-display section-id-one_pin" style="display: none;">
                               
                            </ul>
        </ul>
         <ul class="section-top1">
                            <li class="top-li top-li-one">
                                <p class="namp">代理</p>
                                <a href="#"><i class="iconfont"></i></a>
                            </li>
                            <ul class="section-top-display section-id-one_daili" style="display: none;">
                               
                            </ul>
        </ul>
         <ul class="section-top1">
                            <li class="top-li top-li-one">
                                <p class="namp">商家</p>
                                <a href="#"><i class="iconfont"></i></a>
                            </li>
                            <ul class="section-top-display section-id-one_shop" style="display: none;">
                               
                            </ul>
        </ul>
        </div>

 

 

json数据模式，模拟数据：

{
    "status": "success",
    "results": [
        {
            "guan": "管理1",
            "index": [
                {
                    "pin": "品牌商1",
                        "dataPin": [
                        {
                            "daili":"代理1asdas",
                                "shopData":[
                            {
                                "shop":[
                                    "shop2",
                                    "shop"
                                ]
                                
                            }
                            ]
                        },
                        {
                            "daili":"代理2asdasd",
                            "shopData":[
                            {
                                "shop":[
                                    "shop2asdas",
                                    "shopsadas"
                                ]
                                
                            }
                            ]
                            
                        }
                    ]
                   
                },
                {
                    "pin": "品牌商2",
                        "dataPin": [
                        {
                            "daili":"代理1",
                          "shopData":[
                            {
                                "shop":[
                                    "shop2",
                                    "shop"
                                ]
                                
                            }
                            ]
                        },
                        {
                            "daili":"代理2",
                           "shopData":[
                            {
                                "shop":[
                                    "shop2",
                                    "shop"
                                ]
                                
                            }
                            ]
                            
                        }
                    ]
                   
                }
            ]

        },
        {
            "guan": "管理2",
            "index": [
                {
                    "pin": "品牌商1aasda",
                        "dataPin": [
                        {
                            "daili":"代理1asdsd",
                                "shopData":[
                            {
                                "shop":[
                                    "shop2asda",
                                    "shopasd"
                                ]
                                
                            }
                            ]
                        },
                        {
                            "daili":"代理2asda",
                            
                                "shopData":[
                            {
                                "shop":[
                                    "shop2312",
                                    "shopgf"
                                ]
                                
                            }
                            ]
                            
                        }
                    ]
                   
                },
                {
                    "pin": "品牌商2asdas",
                        "dataPin": [
                        {
                            "daili":"代理1",
                            "shopData":[
                            {
                                "shop":[
                                    "shop2hjhg",
                                    "shop456"
                                ]
                                
                            }
                            ]
                            
                        },
                        {
                            "daili":"代理2",
                            "shopData":[
                            {
                                "shop":[
                                    "shop2xiao",
                                    "shophai"
                                ]
                                
                            }
                            ]
                            
                            
                        }
                    ]
                   
                }
            ]

        }
    ]
}
js代码结构：

window.οnlοad=function(){
        $.ajax({
            type:"get",
            url:"data.json",
            data:{},
            dataType:"json",
            success:function(data){
                //调用管理
                guan(data)
                pin(data.results[0].index)
                dali(data.results[0].index[0].dataPin)    
                shopHome(data.results[0].index[0].dataPin[0].shopData)
            },
            error:function(e){
                console.log(e)
            }    
        });
}
    
    
    /**
     * 管理方法
     * */

    var guanli_canshu1=null//
    function guan(data){
        for(var i=0;i<data.results.length;i++){
                        var guanl='<li type="guan" name="'+i+'"><a href="#">'+data.results[i].guan+'</a></li>';
                        $(".section-id-one").append(guanl)
        }
        guanli_canshu1=data.results;
    }
    /**
     *品牌商方法 
     * */
    var pin_chanshu=null;
    function pin(data){
        for(var i=0;i<data.length;i++){
            var shopPin='<li type="pin" name="'+i+'"><a href="#">'+data[i].pin+'</a></li>';
                $(".section-id-one_pin").append(shopPin)
        }
        pin_chanshu=data;
        console.log("品牌商："+data)
    }
    
    /**
     * 代理方法
     * */
    var dai_canshu=null;
    function dali(data){
        console.log($(".section-id-one_pin"))
        for(var i=0;i<data.length;i++){
            var shopPin='<li type="dai" name="'+i+'"><a href="#">'+data[i].daili+'</a></li>';
                $(".section-id-one_daili").append(shopPin)
        }
        dai_canshu=data;
    }
    
    /**
     * 商家方法
     * */
    function shopHome(data){
        console.log(data.length)
        console.log($(".section-id-one_pin"))
        for(var i=0;i<data.length;i++){
            console.log(data[i].shop)
            for(var j=0;j<data[i].shop.length;j++){
                console.log(data[i].shop[j])
            var shopPin='<li type="shang" name="'+i+'"><a href="#">'+data[i].shop[j]+'</a></li>';
                $(".section-id-one_shop").append(shopPin)
            }    
        }
    
    }
    
    //点击方法
    $(".top-li").click(function(){
//        $(this).siblings("ul").css('display','block')
        $(this).siblings("ul").slideToggle();
        console.log($(this).siblings("ul").find("li").attr("type"))
        if($(this).siblings("ul").find("li").attr("type")=="guan"){
            $(this).siblings("ul").find("li").click(function(){
                $(".section-id-one_pin").html("");
                console.log($(this).attr("name"))
                pin(guanli_canshu1[$(this).attr("name")].index)
            })
        }
        if($(this).siblings("ul").find("li").attr("type")=="pin"){
            
            $(this).siblings("ul").on("click","li",function(){
                alert(2)
                $(".section-id-one_daili").html("");
                console.log($(this).attr("name"))
                console.log(pin_chanshu[$(this).attr("name")])
                dali(pin_chanshu[$(this).attr("name")].dataPin)
            })
                
        
        }
    
        if($(this).siblings("ul").find("li").attr("type")=="dai"){
            
            $(this).siblings("ul").on("click","li",function(){
                console.log(1);
                $(".section-id-one_shop").html("");
                console.log($(this).attr("name"))
                console.log(dai_canshu[1].shopData)
                shopHome(dai_canshu[$(this).attr("name")].shopData)
            })
        }
        
    })
    页面实现效果：