前端html/js/css实现无限级目录树结构，点击目录展示当前子目录

天外飞雨道沧桑

已于 2022-10-10 17:13:15 修改

阅读量2.7k

点赞数 3

分类专栏： js相关知识点前端开发知识点文章标签：前端 javascript css

于 2022-10-10 17:12:20 首次发布

本文链接：https://blog.csdn.net/qq_40868156/article/details/127247757

版权

js相关知识点同时被 2 个专栏收录

13 篇文章

订阅专栏

前端开发知识点

8 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript实现一个可以无限层级展开的目录树结构。通过点击任意目录项即可展示其子目录，并利用文档碎片优化DOM操作，提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何用 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>

效果图：
在这里插入图片描述