首页 > 编程语言 > 详细

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

时间:2019-07-10 15:21:30      阅读:89      评论:0      收藏:0      [点我收藏+]
// 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‘; } }

 

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

原文:https://www.cnblogs.com/hs610/p/11164074.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!