原生JS实现树形菜单展开折叠功能

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《JS实现树形菜单的方法有很多，常见的有使用递归、DOM操作或结合框架（如React、Vue）来构建。以下是一个简单的原生JS实现方式：1. HTML结构

• 节点1
  • 子节点1
  • 子节点2
• 节点2
  • 子节点3

2. CSS样式（可选）.tree ul { padding-left: 20px; } .tree li { cursor: pointer; }3. JavaScript实现展开/折叠功能 document.addEventListener('DOMContentLoaded', function () { const tree = document.getElementById('tree'); // 为每个节点添加点击事件 tree.querySelectorAll('li > span').forEach(span => { span.addEventListener('click', function () { const nextUl = this.nextElementSibling; if (nextUl && nextUl.tagName === 'UL') { nextUl.style.display = nextUl.style.display === 'none' ? 'block' : 'none';》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

构建树形菜单数据结构的核心是使用嵌套的children属性表达父子关系，每个节点包含唯一id和name，适合递归渲染；2. 交互逻辑包括展开/折叠、节点选中、懒加载、搜索过滤、拖拽排序和右键菜单，需结合事件监听与状态管理；3. 性能优化策略有虚拟化渲染、懒加载、事件委托、批量DOM操作、CSS优化、数据预处理和Web Workers，根据数据量选择合适方案；4. 处理大量数据时采用分层加载与异步请求结合，标记hasChildren、显示加载指示器、使用async/await、错误处理、数据缓存，并优化用户体验如平滑过渡、防抖节流、键盘导航，同时依赖后端支持分页查询与路径信息，结合状态管理库维护复杂状态。

JavaScript实现树形菜单，核心在于将层级数据结构（通常是嵌套的数组或对象）通过递归或迭代的方式，动态地渲染成可交互的DOM元素，并配合事件监听来控制节点的展开与折叠。这不单单是写几行代码的事，它涉及到数据模型的选择、渲染性能的考量以及用户体验的优化。

解决方案

实现一个基础的树形菜单，我们可以从数据结构、HTML骨架、JS渲染逻辑和CSS样式四个方面入手。

假设我们有这样的数据：

const treeData = [
    {
        id: '1',
        name: '部门A',
        children: [
            { id: '1-1', name: '子部门A-1', children: [] },
            { id: '1-2', name: '子部门A-2', children: [
                { id: '1-2-1', name: '员工A-2-1', children: [] }
            ] }
        ]
    },
    {
        id: '2',
        name: '部门B',
        children: [
            { id: '2-1', name: '子部门B-1', children: [] }
        ]
    }
];

HTML结构只需要一个容器：

JavaScript渲染逻辑：

function renderTree(data, parentElement) {
    if (!data || data.length === 0) {
        return;
    }

    const ul = document.createElement('ul');
    ul.className = 'tree-list'; // 添加类名方便CSS控制

    data.forEach(node => {
        const li = document.createElement('li');
        li.className = 'tree-node';

        const span = document.createElement('span');
        span.className = 'node-label';
        span.textContent = node.name;
        li.appendChild(span);

        if (node.children && node.children.length > 0) {
            // 添加一个可点击的箭头或图标来表示可展开
            const toggleIcon = document.createElement('span');
            toggleIcon.className = 'toggle-icon collapsed'; // 默认折叠
            toggleIcon.textContent = '▶'; // 或使用CSS图标
            li.insertBefore(toggleIcon, span); // 放在文字前面

            // 递归渲染子节点
            const childUl = renderTree(node.children, li);
            if (childUl) {
                childUl.style.display = 'none'; // 默认隐藏子节点
                li.appendChild(childUl);
            }

            // 绑定点击事件，切换展开/折叠状态
            toggleIcon.addEventListener('click', (event) => {
                event.stopPropagation(); // 阻止事件冒泡到父节点
                const targetUl = li.querySelector('ul');
                if (targetUl) {
                    const isCollapsed = targetUl.style.display === 'none';
                    targetUl.style.display = isCollapsed ? '' : 'none';
                    toggleIcon.classList.toggle('collapsed', !isCollapsed);
                    toggleIcon.classList.toggle('expanded', isCollapsed);
                    toggleIcon.textContent = isCollapsed ? '▼' : '▶'; // 切换图标
                }
            });
        }
        ul.appendChild(li);
    });

    parentElement.appendChild(ul);
    return ul; // 返回创建的UL元素，方便递归调用
}

// 初始化渲染
const treeContainer = document.getElementById('tree-container');
renderTree(treeData, treeContainer);

CSS样式（基础样式，可根据需求美化）：

#tree-container {
    font-family: Arial, sans-serif;
    padding: 10px;
    border: 1px solid #ccc;
    max-width: 300px;
    user-select: none; /* 防止文本被选中 */
}

.tree-list {
    list-style: none;
    padding-left: 20px; /* 缩进 */
    margin: 0;
}

.tree-node {
    margin: 5px 0;
    cursor: pointer;
    display: flex; /* 让图标和文字在同一行 */
    align-items: center;
}

.tree-node .node-label {
    padding: 2px 0;
}

.tree-node .toggle-icon {
    margin-right: 5px;
    width: 15px; /* 确保图标有固定宽度，避免文字跳动 */
    text-align: center;
    cursor: pointer;
    font-size: 0.8em;
    color: #666;
}

.tree-node .toggle-icon.expanded {
    /* 展开状态的图标样式 */
}

.tree-node .toggle-icon.collapsed {
    /* 折叠状态的图标样式 */
}

这段代码提供了一个可用的基础框架。它用递归的方式处理层级，通过简单的 display: none 来控制节点的显示与隐藏，并用一个 span 元素作为切换图标，响应点击事件。

如何构建适合树形菜单的数据结构？

构建一个适合树形菜单的数据结构，核心思想是清晰地表达节点间的父子关系。最常见且直观的方式是使用一个包含对象的数组，每个对象代表一个节点，并且如果该节点有子节点，它会包含一个名为 children 的属性，其值是另一个数组，数组中存放的就是它的子节点对象。

比如：

const organizationData = [
    {
        id: 'org-1',
        name: '公司总部',
        children: [
            {
                id: 'dept-1',
                name: '研发部',
                children: [
                    { id: 'team-1', name: '前端组', children: [] },
                    { id: 'team-2', name: '后端组', children: [] }
                ]
            },
            {
                id: 'dept-2',
                name: '市场部',
                children: [
                    { id: 'emp-1', name: '张三', children: [] } // 员工也可以是叶子节点
                ]
            }
        ]
    },
    {
        id: 'org-2',
        name: '分公司A',
        children: []
    }
];

这种嵌套的 children 结构非常适合递归渲染，因为它的结构与DOM的嵌套

• 结构天然匹配。每个节点通常还会有一个唯一的 id 和一个 name 或 label 属性用于显示。

  有时，你可能从后端API获取到的是一个“扁平化”的数据列表，例如：

  const flatData = [
      { id: '1', name: '公司总部', parentId: null },
      { id: '2', name: '研发部', parentId: '1' },
      { id: '3', name: '市场部', parentId: '1' },
      { id: '4', name: '前端组', parentId: '2' },
      { id: '5', name: '后端组', parentId: '2' },
      { id: '6', name: '张三', parentId: '3' }
  ];

  这种情况下，你需要先编写一个函数来将扁平数据转换成前面提到的嵌套结构。这通常通过遍历数组，构建一个映射 id -> node 的哈希表，然后将子节点添加到其父节点的 children 数组中来完成。这个转换过程虽然增加了初始复杂度，但在数据量较大时，这种扁平化存储在数据库中会更高效。

  function convertToTree(flatList, parentId = null) {
      const tree = [];
      const children = flatList.filter(item => item.parentId === parentId);
  
      children.forEach(child => {
          const node = { ...child }; // 复制节点属性
          node.children = convertToTree(flatList, child.id); // 递归查找子节点
          tree.push(node);
      });
      return tree;
  }
  
  // const nestedTree = convertToTree(flatData);
  // console.log(nestedTree);

  选择哪种数据结构取决于你的数据来源和具体需求。如果数据量不大且层级固定，直接构建嵌套结构可能更方便；如果数据动态且可能来自数据库，扁平化结构加转换函数会是更健壮的选择。

  树形菜单的交互逻辑有哪些常见实现方式？

  树形菜单的交互逻辑远不止简单的展开/折叠。一个实用的树形菜单通常会包含以下几种常见的交互方式：

  1. 展开/折叠 (Expand/Collapse)：

     • 点击图标/箭头切换：这是最基本的，如前面示例所示，通过点击一个专门的图标来切换子节点的显示/隐藏状态。通常会伴随图标的旋转（如 ▶ 变成 ▼）或动画效果。
     • 点击节点文字切换：有些设计允许点击节点本身的文字区域来展开或折叠。这需要注意与节点选中事件的冲突。
     • 双击切换：提供更明确的意图，避免误触。
     • 记住状态：在用户离开页面或刷新后，记住之前展开的节点状态，这通常需要将展开的节点ID存储在本地存储（localStorage）或通过后端接口同步。

  2. 节点选中 (Node Selection)：

     • 单选：点击一个节点时，高亮显示该节点，并取消其他节点的高亮。常用于选择一个唯一的目录或文件。
     • 多选：点击节点时，可以同时选中多个节点。这通常通过复选框（checkbox）来实现，并且可能涉及“父子联动”——选中父节点时，所有子节点自动选中；取消父节点时，所有子节点取消；子节点全部选中时，父节点自动选中。
     • 高亮显示：选中节点后，改变其背景色、字体颜色等样式，以视觉反馈告知用户当前选中的是哪个节点。

  3. 懒加载 (Lazy Loading)：

     • 对于拥有大量节点或层级很深的树，一次性加载所有数据可能导致页面卡顿。懒加载的思路是：当一个节点被展开时，才去异步请求其子节点的数据。
     • 实现上，通常在数据结构中标记某个节点是否有子节点（例如 hasChildren: true），但 children 数组为空。当用户点击展开时，触发一个事件，调用API获取数据，然后将返回的子节点数据填充到该节点的 children 属性中，并重新渲染该部分树。加载过程中可以显示一个“加载中...”的指示器。

  4. 搜索/过滤 (Search/Filter)：

     • 提供一个输入框，用户输入关键词后，实时过滤树形结构，只显示匹配关键词的节点及其所有祖先节点。
     • 实现时，需要遍历整个树结构，找到匹配的节点，然后向上追溯其父节点，确保它们也显示出来。未匹配的节点及其子树则隐藏。

  5. 拖拽排序 (Drag & Drop)：

     • 允许用户通过拖拽来改变节点的顺序或将节点移动到另一个父节点下。
     • 这个功能实现起来相对复杂，需要监听 dragstart, dragover, drop 等HTML5拖拽事件，并处理拖拽过程中的视觉反馈（如拖拽占位符、目标高亮），以及拖拽结束后数据结构的更新。

  6. 右键菜单 (Context Menu)：

     • 当用户右键点击某个节点时，弹出一个与该节点相关的操作菜单（如“新增子节点”、“删除”、“重命名”等）。
     • 这需要阻止浏览器默认的右键菜单行为（event.preventDefault()），并根据点击的节点动态生成并显示自定义菜单。

  每种交互方式都需要仔细设计其触发方式、视觉反馈以及背后的数据处理逻辑。例如，多选和懒加载往往会显著增加实现的复杂性，但也能极大地提升用户体验，尤其是在企业级应用中。

  在实现树形菜单时，有哪些常见的性能优化策略？

  当树形菜单的数据量变得庞大时，性能问题就会凸显出来。如果不加优化，可能会导致页面渲染缓慢、操作卡顿。以下是一些常见的性能优化策略：

  1. 虚拟化渲染 (Virtualization / Windowing)： 这是处理超大数据集最有效的方法之一。其核心思想是：只渲染当前视口（或其附近）可见的节点，而不是一次性渲染所有节点。当用户滚动时，动态计算哪些节点应该显示，哪些应该隐藏，并更新DOM。

     • 实现方式：需要精确计算每个节点的高度和位置，监听滚动事件，根据滚动位置动态调整渲染范围。这通常涉及到维护一个大的虚拟滚动区域，并只在其中放置少量实际的DOM元素。
     • 挑战：实现起来比较复杂，特别是当节点高度不一致时。但对于数万甚至数十万个节点的树，这是几乎唯一的选择。

  2. 懒加载 (Lazy Loading)： 前面已经提到，这是减少初始加载量的关键。只在用户展开节点时，才去请求并渲染其子节点数据。

     • 优点：大幅减少首次加载时间，降低内存占用。
     • 适用场景：数据量大、层级深，且用户不太可能一次性查看所有节点的场景。

  3. 事件委托 (Event Delegation)： 不要为树中的每一个节点都绑定独立的事件监听器。相反，将事件监听器绑定到树的根容器上。当事件（如点击）发生时，事件会沿着DOM树冒泡到根容器，这时你可以在根容器的监听器中检查 event.target 来判断是哪个具体的节点触发了事件。

     • 优点：显著减少事件监听器的数量，节省内存，提高性能。
     • 实现：在事件处理函数中，通过 event.target.closest('.tree-node') 或其他选择器来判断点击的是否是树节点，并获取其相关数据。

  4. 批量DOM操作 (Batch DOM Operations)： 频繁地操作DOM（添加、删除、修改元素）会导致浏览器进行布局重排（reflow）和重绘（repaint），这是非常耗性能的。尽量将多个DOM操作合并成一次。

     • 例如：不要在循环中每次都 appendChild，而是先构建一个文档片段（DocumentFragment），将所有新元素添加到文档片段中，最后一次性将文档片段添加到DOM树中。
     • 避免：在循环中读取元素的 offsetWidth、offsetHeight 等布局属性，因为这会强制浏览器立即执行布局计算。

  5. CSS优化：

     • 使用CSS动画代替JS动画：CSS动画（如 transition 或 animation）通常由浏览器底层优化，性能优于JavaScript直接操作DOM属性实现的动画。
     • 避免使用会触发重排的CSS属性：如 width, height, left, top, margin, padding 等。如果需要移动元素，优先考虑使用 transform 属性（translate()），因为它通常只触发重绘，不触发重排。
     • 利用CSS选择器优化：编写高效的CSS选择器，避免过于复杂的嵌套或通配符选择器。

  6. 数据预处理： 如果从后端获取的数据是扁平化的，在渲染前将其转换为嵌套的树形结构。虽然这会增加初始的JavaScript处理时间，但可以简化后续的渲染逻辑，并且在渲染时避免重复的查找操作。

  7. 使用Web Workers： 对于非常复杂的数据转换或过滤操作，如果这些操作会导致主线程阻塞，可以考虑将其放到Web Worker中执行。Web Worker在后台线程运行，不会阻塞UI，待计算完成后再将结果传回主线程更新UI。

  这些策略并非相互独立，通常需要结合使用。例如，一个大型的树形菜单可能需要同时采用懒加载和事件委托，甚至在极端情况下结合虚拟化渲染。选择哪种策略取决于你的具体需求、数据量大小以及对性能的要求。

  如何处理树形菜单中的大量数据和异步加载？

  处理大量数据和异步加载是树形菜单高级应用中不可避免的挑战，它直接关系到用户体验和应用的响应速度。

  1. 数据分层与懒加载的深度结合： 当数据量巨大时，不可能一次性从服务器获取所有数据。我们需要将数据按层级或按需进行拆分。

     • 根节点数据：首次加载时，只获取最顶层的节点数据。
     • 子节点按需加载：当用户点击展开一个父节点时，再向服务器发送请求，获取该父节点下的所有子节点数据。这要求后端API能根据父节点ID返回其直接子节点。
     • 标记可展开状态：为了让用户知道某个节点是否有子节点可供展开（即使子节点数据尚未加载），可以在初始数据中包含一个 hasChildren: true 的标志。这样，即使 children 数组为空，我们也能显示展开图标。

  2. 异步加载的实现细节：

     • 加载指示器：在异步请求发出后、数据返回前，在被点击的节点旁边显示一个“加载中...”的图标或文本，告知用户正在等待数据。这能有效缓解用户的焦虑感。
     • Promise/Async-Await：利用现代JavaScript的Promise或async/await语法来管理异步操作，使代码更具可读性和可维护性。
     • 错误处理：异步请求可能会失败（网络问题、服务器错误等）。需要捕获这些错误，并向用户提供友好的提示，例如“加载失败，请重试”。
     • 数据缓存：对于已经加载过的子节点数据，可以考虑在前端进行缓存，避免用户重复展开同一节点时再次发起网络请求。简单的做法是在节点对象上直接存储已加载的 children 数据。

  3. 用户体验优化：

     • 平滑过渡：当子节点加载并渲染完成后，如果可能，添加一些简单的CSS过渡动画，让展开过程看起来更自然，而不是突然出现。
     • 防抖与节流：如果树形菜单支持搜索或过滤功能，并且数据量很大，用户输入时可能触发频繁的重新渲染或网络请求。使用防抖（debounce）或节流（throttle）技术可以限制这些操作的频率，提升性能。例如，用户停止输入一段时间后才执行搜索。
     • 键盘导航：对于大量数据，鼠标操作可能效率低下。支持键盘上下左右箭头导航、Enter键展开/折叠、Tab键切换焦点等，可以显著提升高级用户的操作效率。

  4. 后端支持： 高效的树形菜单异步加载，离不开后端API的良好支持。后端应该能够：

     • 根据父节点ID快速查询其直接子节点。
     • 支持分页查询（如果子节点数量也很大）。
     • 提供节点路径或层级信息，以便前端在需要时快速定位。

  5. 状态管理： 在复杂的单页应用中，树形菜单的状态（哪些节点已展开、哪些已选中、哪些正在加载等）可能会变得复杂。考虑使用一个专门的状态管理库（如Vuex、Redux或React Context API）来集中管理这些状态，确保数据流清晰，组件间通信顺畅。

  处理大量数据和异步加载是一个系统工程，它不仅仅是前端代码层面的优化，更需要前端设计、后端API设计以及整体架构的协同配合。

  今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~