昨天項(xiàng)目需要一個(gè)三級聯(lián)動(dòng)仇祭，自己就動(dòng)手寫了一個(gè)
var index=0;
var arrJson={
"arr1":[
{"id":"1904a7ce91804826b8574f6298c3e2b0","parentIds":"0,","name":"行政管理","sort":30,"hasChildren":false,"state":"01","parentId":"0"},
{"id":"9706a96d96a64518be1b4a4582bbd38f","parentIds":"0,","name":"請問前往","sort":30,"hasChildren":false,"state":"1231","parentId":"0"},
{"id":"c4daa821b64a4d5c8f9bb9c90508c85c","parentIds":"0,","name":"123","sort":30,"hasChildren":false,"state":"123","parentId":"0"}
],
"arr2":[
{"id":"125ef074ff3941f9bae4f67eec4e40f5","parentIds":"0,c4daa821b64a4d5c8f9bb9c90508c85c,","name":"請問","sort":30,"hasChildren":false,"state":"驅(qū)蚊器","parentId":"c4daa821b64a4d5c8f9bb9c90508c85c"},
{"id":"880c2c435e5d4437ba7be0b38d390d07","parentIds":"0,1904a7ce91804826b8574f6298c3e2b0,","name":"2018","sort":30,"hasChildren":false,"state":"2018","parentId":"1904a7ce91804826b8574f6298c3e2b0"},
{"id":"a9eb43bfb5234575964618b847787711","parentIds":"0,9706a96d96a64518be1b4a4582bbd38f,","name":"企鵝企鵝","sort":30,"hasChildren":false,"state":"1231","parentId":"9706a96d96a64518be1b4a4582bbd38f"}
],
"arr3":[
{"id":"2fe43635f5f5401c8781e94320bf533e","parentIds":"0,c4daa821b64a4d5c8f9bb9c90508c85c,125ef074ff3941f9bae4f67eec4e40f5,","name":"送達(dá)","sort":30,"hasChildren":false,"state":"驅(qū)蚊器","parentId":"125ef074ff3941f9bae4f67eec4e40f5"},
{"id":"5c29156c15a04c4085d42bb986c8af09","parentIds":"0,1904a7ce91804826b8574f6298c3e2b0,880c2c435e5d4437ba7be0b38d390d07,","name":"法紀(jì)檢察","sort":30,"hasChildren":false,"state":"1","parentId":"880c2c435e5d4437ba7be0b38d390d07"}
]
}

var html1='';
$.each(arrJson.arr1,function(i,n){
html1+='<div class="lListLi" id="'+n.id+'">'+n.name+'</div>';
})

$('.linkageList').eq(0).append(html1);

$(document).on('click','.linkageTop li',function(){
index=$('.linkageTop li').index($(this));
if(index == 0){
$('.linkageList').eq(1).remove().end().eq(2).remove();
}else if(index == 1){
$('.linkageList').eq(2).remove();
}

if($(this).hasClass('active')){
  $(this).removeClass('active').siblings().removeClass('active');
}else{
  $(this).addClass('active').siblings().removeClass('active');
}

}).on('click','.lListLi',function(e){
e?e.stopPropagation():event.cancelBubble = true;
$(this).parents('li').attr('id',$(this).attr('id')).find('span').text($(this).text())
if(index == 0){
index++;
$('.linkageTop li span').eq(1).text('二級聯(lián)動(dòng)').end().eq(2).text('三級聯(lián)動(dòng)');
$('.linkageTop li').eq(1).addClass('active').siblings().removeClass('active');

  var htmls='<div class="linkageList">';
  var ids = $('.linkageTop li').eq(0).attr('id');

  $.each(arrJson.arr2,function(i,n){
    var parentIds=n.parentIds.split(',')
    if(ids == parentIds[1]){
      htmls +='<div class="lListLi" id="'+n.id+'">'+n.name+'</div>';
    }
    
  })
  htmls +='</div>';
  $('.linkageTop li').eq(1).append(htmls);

}else if(index == 1){
   index++;
  $('.linkageTop li span').eq(2).text('三級聯(lián)動(dòng)');
  $('.linkageTop li').eq(2).addClass('active').siblings().removeClass('active');

  var htmls='<div class="linkageList">';
  var ids = $('.linkageTop li').eq(0).attr('id');
  var idss = $('.linkageTop li').eq(1).attr('id');
  $.each(arrJson.arr3,function(i,n){
    var parentIds=n.parentIds.split(',')
    if(ids == parentIds[1] && idss == parentIds[2]){
      htmls +='<div class="lListLi" id="'+n.parentIds+n.id+'">'+n.name+'</div>';
    }
  })
  htmls +='</div>';
  $('.linkageTop li').eq(2).append(htmls);

}else if(index ==2){
  $('.linkageTop li').removeClass('active').eq(2).find('span').attr('id',$(this).attr('id'));
}

})