前端html/js/css实现无限级目录树结构，点击目录展示当前子目录
·
如何用 js, html 实现无级别限制的点击目录展示当前所有子目录的目录树结构？
思路： 使用 ul 无序列表实现，子目录放在 li 标签下，每次点击 li 列表项元素时，就将该列表下的所有子列表项添加到 DOM 中，因为列表项可能会很多，一个个添加 DOM 性能开销大，所以这里借助文档碎片 documentFragment 处理，进行一次添加 DOM 操作，在添加子列表前要判断当前 li 下有没有添加过列表项，有的话就将之前就列表项全部移除，防止重复点击添加重复的列表项。（这里没有做再次点击隐藏子目录处理，可以在每次点击 li 事件中加入判断处理，判断子目录 display !== “none” 时做隐藏处理，等于时设置为 block 做展示处理）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul onclick="getList(event)">
<li>一级列表1</li>
<li>一级列表2</li>
</ul>
<script>
function getList(e) {
// list 是当前点击目录查询到的子目录列表数据
var list = [{
name: '子列表1'
}, {
name: '子列表2'
}, {
name: '子列表3'
}, {
name: '子列表4'
}]
var clickDom = e.target
var fragment = document.createDocumentFragment()
var ul = document.createElement('ul')
list.forEach(item => {
var listItem = document.createElement('li')
listItem.innerText = item.name
ul.appendChild(listItem)
})
fragment.appendChild(ul)
var oldUl = clickDom.querySelector('ul')
if (oldUl) {
clickDom.removeChild(oldUl)
}
clickDom.appendChild(fragment)
}
</script>
</body>
</html>
效果图：
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)