原生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.onload=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)
})
}
})
页面实现效果：