原生JavaScript，递归解析树状结构数据

// titleJson 为需要循环的数据 ，第二个参数是页面id   
    　　　　 generate(titleJson,document.getElementById('container'));
            //这里生成DOM  递归树状格式
            function generate(titleJson,par){
                for(var attr in titleJson) {
                    var ele=document.createElement('li');
                    ele.innerHTML=`<span><span class="switch-close expansionofCa"></span><a class="locationcontent close-panel" style="font-size:.75rem;color:#fff;" id= ${titleJson[attr].articleId}>${titleJson[attr].title}</a></span>`;
                    var nextpar=document.createElement('ul');
                    ele.appendChild(nextpar);
                    generate(titleJson[attr].children,nextpar);
                    nextpar.style.display='none';
                    par.appendChild(ele);
                }
            }
            //处理展开和收起
            function toggle(eve){
                var par=eve.parentNode.nextElementSibling;
                if(par.style.display=='none'){
                    par.style.display='block';
                    eve.className='switch-open expansionofCa';
                }else{
                    par.style.display='none';
                    eve.className='switch-close expansionofCa';
                }
            }

 

转载于:https://www.cnblogs.com/hs610/p/11164074.html