有其他的方法可以一起交流学习n(*≧▽≦*)n
效果图：css样式自己设置哟
js:
let index = 0;function generateDom(menusData,menusDom) {for(let menu in menusData) {let li = document.createElement('li');if(typeof(menusData[menu].subMenu)=="undefined" || menusData[menu].subMenu=="") {li.innerHTML = '<div class="navIcon">'+'<svg class="icon iconStyle" aria-hidden="true">'+'<use xlink:href="#'+menusData[menu].iconUrl+'"></use>'+'</svg>'+'<span class="fontStyle">'+menusData[menu].name+'</span>'+'</div>';}else {index++;let svgId = "svg"+index;let iconUrl = "#"+menusData[menu].iconUrl;let iconUrlSpread = "#"+menusData[menu].iconUrlSpread;li.innerHTML = '<div class="navIcon" onclick="toggle(this,\''+iconUrl+'\',\''+iconUrlSpread+'\',\''+svgId+'\')">'+'<svg class="icon iconStyle" aria-hidden="true">'+'<use id="svg'+index+'" xlink:href="#'+menusData[menu].iconUrl+'"></use>'+'</svg>'+'<span class="fontStyle">'+menusData[menu].name+'</span>'+'</div>';let ul = document.createElement('ul');li.appendChild(ul);ul.setAttribute("style","display:none");ul.classList.add("active");generateDom(menusData[menu].subMenu,ul);}menusDom.appendChild(li);}}function toggle(event,packUp,spread,svgId) {let iconInfo = [packUp,spread,svgId];let brother = event.nextElementSibling;showHidden(brother,event,iconInfo);}function showHidden(element,event,iconInfo) {let icon = document.getElementById(iconInfo[2]);if(element.style.display=="none") {element.setAttribute("style","display:block");icon.setAttribute("xlink:href",iconInfo[1]);}else {element.setAttribute("style","display:none");icon.setAttribute("xlink:href",iconInfo[0]);}}
html页面使用js
let menusData = [{"iconUrl": "","name": ""},{"iconUrl": "", //收起时的图标"iconUrlSpread": "", //展开时的图标"name": "","subMenu": [ //子菜单{"iconUrl": "icon-nasguanli","name": ""},{"iconUrl": "icon-wenjianguanli","name": ""}]},{"iconUrl": "","name": ""}];$(function(){let ulId = document.getElementById('menus');generateDom(menusData,ulId);});
html:
<ul id="menus"></ul>
