angular.js - 通過數(shù)據(jù)中children的個(gè)數(shù)自動(dòng)生成能點(diǎn)擊展開的div
問題描述
數(shù)據(jù)如圖:
根據(jù)獲取的這些數(shù)據(jù)要做出這樣的效果:
最外面的父級(jí)一直都顯示,點(diǎn)擊后顯示它的子級(jí),如果子級(jí)還有子級(jí),點(diǎn)擊后又可以展開...
問題解答
回答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>
相關(guān)文章：
1. javascript - js 寫一個(gè)正則 提取文本中的數(shù)據(jù)2. javascript - 為什么我的vue里的router-link不起作用3. javascript - js一個(gè)小的算法問題，找個(gè)好一點(diǎn)的答案。4. javascript - vue子路由匹配渲染到頂級(jí)視圖層問題5. 算法 - python 給定一個(gè)正整數(shù)a和一個(gè)包含任意個(gè)正整數(shù)的 列表 b，求所有<=a 的加法組合6. javascript - 游戲里物體角色層次渲染邏輯和代碼怎么寫才好？7. javascript - 發(fā)現(xiàn)個(gè)奇怪的問題，寫的css動(dòng)畫當(dāng)我把標(biāo)簽頁收起時(shí)動(dòng)畫自動(dòng)暫停了8. javascript - 新組成的數(shù)組打印出來出現(xiàn)問題，里面有對(duì)象，但長度為空9. javascript - 關(guān)于Lazyload遇到的問題10. javascript - 如果根據(jù)參數(shù)給table中的tr綁定不同事件
網(wǎng)公網(wǎng)安備