根據json資料動態生成無限級聯(demo三層陣列迴圈,形成三級聯動)
阿新 • • 發佈：2018-12-29
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } a { color: #fff; text-decoration: none; display: block; } #ul1 { width: 1000px; font-size: 14px; color: #fff; line-height: 30px; text-align: center; margin: 0 auto; margin-top: 50px; } #ul1 li { display: inline-block; float: left; width: 98px; height: 30px; background: #666666; border: 1px solid #fff; } #ul1 li:hover { background:#DBDBDB; } #ul1 .ul2 { display: none; position: relative; width: 100px; } #ul1 .ul2 li { /*background: ;*/ position: relative; } #ul1 .ul2 li:hover { background: #DBDBDB; } #ul1 .ul2 .ul3 li:hover { background: #DBDBDB; } #ul1 .ul2 .ul3 li { background: #666666; } #ul1 .ul2 .ul3 { position: absolute; left: 98px; top: 0px; display: none; width: 100px; height: 90px; } .right_flag{ background-image: url('right.png') !important; background-size:20px 10px !important; background-repeat:no-repeat !important; background-position: left 72px top 10px !important; } </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <ul id="ul1"></ul> </body> <script> $(function(){ var data=[ { name:'家用電器', childrens:[ { name:"電視", // childrens:[ // {name:'曲面電視'}, // {name:"超薄電視"}, // {name:"超薄電視"}, // {name:"超薄電視"}, // ] }, { name:"空調", childrens:[ {name:'壁掛式空調'}, {name:"櫃式空調"}, {name:"OLED電視"}, ] }, { name:"洗衣機", childrens:[ {name:'滾筒式洗衣機'}, {name:"洗烘一體機"}, {name:"波輪洗衣機"}, ] }, ] }, { name:'工業品', childrens:[ { name:"工具", childrens:[ {name:'手動工具'}, {name:"電動工具"}, {name:"測量工具"}, ] }, { name:"勞動防護", childrens:[ {name:'手部防護'}, {name:"足部防護"}, {name:"身體防護"}, ] }, { name:"工控配電", childrens:[ {name:'電線電纜'}, {name:"開關插座"}, {name:"抵押配電"}, ] }, ] }, { name:'母嬰', childrens:[ { name:"奶粉", childrens:[ {name:'孕媽奶粉'}, {name:"特殊配方奶粉"}, {name:"有機奶粉"}, ] }, { name:"營養輔食", childrens:[ {name:'米粉/菜粉'}, {name:"麵條/粥"}, {name:"果泥/果汁"}, ] }, { name:"尿溼溼巾", childrens:[ {name:'拉拉褲'}, {name:"成人尿褲"}, {name:"嬰兒溼巾"}, ] }, ] }, { name:'醫藥保健', childrens:[ { name:"中西藥品", childrens:[ {name:'感冒咳嗽'}, {name:"補腎壯陽"}, {name:"補氣養血"}, ] }, { name:"營養健康", childrens:[ {name:'增強免疫'}, {name:"骨骼健康"}, {name:"補腎強身"}, ] }, { name:"營養成分", childrens:[ {name:'維生素/礦物質'}, {name:"膠原蛋白"}, {name:"益生菌"}, ] }, ] }, { name:'食品', childrens:[ { name:"新鮮水貨", childrens:[ {name:'蘋果'}, {name:"橙子"}, {name:"奇異果/獼猴桃"}, ] }, { name:"蔬菜蛋品", childrens:[ {name:'蛋品'}, {name:"葉菜類"}, {name:"根莖類"}, ] }, { name:"精選肉類", childrens:[ {name:'豬肉'}, {name:"牛肉"}, {name:"羊肉"}, ] }, ] }, ]; var str="" for(var i=0;i<data.length;i++){ str+=`<li class="li1"><a href="##">${data[i].name}</a><ul class="ul2">` for(var j=0;j<data[i].childrens.length;j++){ str+=`<li class="li2 right_flag"><a href="##">${data[i].childrens[j].name}</a>` str+=`<ul class="ul3">` if(data[i].childrens[j].hasOwnProperty("childrens")){ for(var k=0;k<data[i].childrens[j].childrens.length;k++){ str+=`<li class="li3"><a href="##">${data[i].childrens[j].childrens[k].name}</a></li>` } str+="</ul></li>" }else{ str+="</ul></li>" } } str+="</ul></li>" } $("#ul1").append(str) var ul1=$("#ul1"); var ul2=$(".ul2"); var li1=$(".li1"); var ul3=$(".ul3"); var li2=$(".li2"); filter_as("#ul1"); //獲取二級選單 getItem(li1, ul2); //獲取三級選單 getItem(li2, ul3); //顯示下拉選單 function getItem(obj, ul) { for (var index = 0; index < obj.length; index++) { obj[index].index = index; obj[index].onmouseover = function() { ul[this.index].style.display = "block"; } obj[index].onmouseout = function() { ul[this.index].style.display = "none"; } } } }) function filter_as(one){ var zi_obj=''; $(one).children("li").each(function(){ li_a(this); }) } function li_a(obj){ var ul_obj=$(obj).children("ul"); var li_obj=ul_obj.children("li"); if(li_obj.length==0) { $(obj).removeClass("right_flag"); return; } li_obj.each(function(){ li_a(this); }) } </script> </html>