閒來無事寫了個三級樹形菜單demo，基於Jquery,還有很多優化空間
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三級樹形菜單demo</title>
</head>
<body>
<ul>
<li>
<ul class="container_ul">
</ul>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// data和dataChild分別作爲模擬的ajax數據
var data=[{
city:'北京0',
cityChild:['朝陽0','海淀0','東城區0']
},{
city:'北京1',
cityChild:['朝陽1','海淀1','東城區1']
},{
city:'北京2',
cityChild:['朝陽2','海淀2','東城區2']
},{
city:'北京3',
cityChild:['朝陽3','海淀3','東城區3']
},{
city:'北京4',
cityChild:['朝陽4','海淀4','東城區4']
}];
var dataChild=[{
country:'朝陽0',
countryChild:['朝陽子類0','朝陽子類1','朝陽子類2']
},{
country:'海淀0',
countryChild:['海淀子類0','海淀子類1','海淀子類2']
},{
country:'東城區0',
countryChild:['東城區子類0','東城區子類1','東城區子類2']
},{
country:'朝陽1',
countryChild:['朝陽子類1','朝陽子類2','朝陽子類3']
},{
country:'海淀1',
countryChild:['海淀子類1','海淀子類2','海淀子類3']
},{
country:'東城區1',
countryChild:['東城區子類1','東城區子類2','東城區子類3']
}]
var html='';
data.forEach(function(item,index){
console.log(index,'???');
html +='<li class="item'+index+'">'+item.city+'</li>';
})
$('.container_ul').append(html);
$('.container_ul').click(function(e){
e.stopPropagation();
console.log(e.target,'jjjjjj');
if(e.target.tagName.toUpperCase()=='LI'){
let a =e.target.className;
console.log(a,'aaaaa');
if(a.indexOf('last')>-1){
// 點擊最後一級
return;
}
else if(a.indexOf('item_sec')>-1){
console.log('這是點擊二級類的邏輯');
console.log($(e.target).find("ul"),'我是etarget');
console.log($(e.target).html());
var html2;
console.log($(e.target).find("ul").length,'??????????')
if($(e.target).find("ul").length>0){
$(e.target).children("ul").remove();
}else{
html2='<ul>';
dataChild.forEach(function(element, index) {
if(element.country==$(e.target).html()){
console.log(element.countryChild,index,'jhhhh');
element.countryChild.forEach(function(item, index) {
html2+='<li class="last">'+item+'</li>'
});
}
});
html2+='</ul>';
$('.'+a).siblings('.last').children().empty();
$('.'+a+' '+"ul").remove();
$(e.target).append(html2);
console.log(html2,'我是html22');
return;
}
}else{
let index=a.substr(a.length-1,1);
var html1="<ul>";
data[index].cityChild.forEach(function(item, index) {
html1 +='<li class="item item_sec">'+item+'</li>';// statements
});
html1+='</ul>';
console.log(e.target,'我是target');
console.log($(e.target).find('ul'));
if($(e.target).find('ul').length){
html1=''
}
$(e.target).siblings('.item').children().empty();
$('.'+a+' '+"ul").remove();
$(e.target).append(html1);
}
}
})
</script>
</body>
</html>