angular.js - 通过数据中children的个数自动生成能点击展开的div
问题描述
数据如图:
根据获取的这些数据要做出这样的效果:
最外面的父级一直都显示,点击后显示它的子级,如果子级还有子级,点击后又可以展开...
问题解答
回答1：<!DOCTYPE html> <html> <head><meta charset='utf-8' /><style type='text/css'> .list {margin: 0;padding-left: 20px; }.list li {list-style: none; }.hide {display: none; }.control ~ .control-label {display: inline-block;width: 0;height: 0;border: 6px solid transparent;border-left-color: #000; }.control:checked ~ .control-label {border-left-color: transparent;border-top-color: #000; }.control ~ .list {display: none; }.control:checked ~ .list {display: block; }.control-label::after {content: attr(data-title);display: block;margin-top: -6px;margin-left: 0.5em;width: 10em;font-size: 12px;line-height: 12px; }</style> <head> <body><script> function createItem(data) {var id = (Math.random()).toString(16).slice(2); var p = document.createElement(’p’); p.className = ’content’;var input = document.createElement(’input’);input.type = ’checkbox’; input.className = ’hide control’; input.id = ’control-’ + id; var label = document.createElement(’label’); label.className = ’control-label’; label.setAttribute(’for’,’control-’ + id); label.dataset.title = ’[’ + data.Code + ’]’ + data.Name;p.appendChild(input);p.appendChild(label); return p; } function createTree(data) {var ul = document.createElement(’ul’); ul.className = ’list’; for(var i = 0,len = data.length; i < len; i++) { var li = document.createElement(’li’); var p = createItem(data[i]); li.appendChild(p); if(data[i].children && data[i].children.length > 0) {p.appendChild(createTree(data[i].children)); } ul.appendChild(li);} return ul; } var elems = createTree(data); document.body.appendChild(elems);</script> </body></html>
相关文章：
1. flexbox - css3[flex-shrink]属性在子项有 padding/box-sizing 属性时，是如何计算子项宽度的?2. 【python小白】 问关于property的顺序问题3. 9.png中在同一方向上设置多个拉伸位置，在android studio中怎么弄出来？4. angular.js - angular1如何使用跨域后的得到的数据5. angular.js - 如何在指令里使用ng-click6. android-studio - Android Studio 中有没有类似C#的#if DEBUG功能7. angular.js input输入正确数据框变红色8. JS怎么给每相隔一行的TD添加filter滤镜？9. angular.js - Angular 像这种重复判断的表达式 有什么好的解决办法吗？~10. android-studio - android studio自带模拟器中的本地“图库”所对应的路径是什么？
网公网安备