樹形菜單是前端開發中常見的交互組件，用于展示具有層級關系的數據（如文件目錄、分類列表、組織架構等）。以下從核心概念、實現方式、常見功能及優化方向等方面進行總結。
一、核心概念
- 層級結構：數據以父子嵌套形式存在，如
{ id: 1, children: [{ id: 2 }] }。 - 節點：樹形結構的基本單元，包含自身信息及子節點（若有）。
- 展開 / 折疊：子節點的顯示與隱藏切換，是樹形菜單的核心交互。
- 遞歸渲染：因數據層級不固定，通常通過遞歸函數生成 DOM 結構。
二、數據格式設計
常見的樹形數據格式（以 JSON 為例）：
javascript
const treeData = [{id: 1,label: "父節點1",// 可選：是否默認展開expanded: false,// 可選：是否禁用節點disabled: false,// 子節點（數組，無則為葉子節點）children: [{ id: 11, label: "子節點1-1", children: [] },{ id: 12, label: "子節點1-2" }]},{ id: 2, label: "父節點2" }
];
三、實現方式
1. 原生 JavaScript + DOM 操作
核心步驟：
- 定義遞歸函數，根據數據生成節點 DOM。
- 為父節點添加點擊事件，控制子節點顯示 / 隱藏。
- 處理特殊狀態（如禁用、默認展開）。
示例代碼片段：
javascript
function renderTree(data, container) {const ul = document.createElement("ul");data.forEach(node => {const li = document.createElement("li");li.innerHTML = `<span class="node-label ${node.disabled ? 'disabled' : ''}">${node.children?.length ? (node.expanded ? '▼' : '?') : '?'} ${node.label}</span>`;// 處理展開/折疊if (node.children?.length && !node.disabled) {li.querySelector(".node-label").addEventListener("click", () => {node.expanded = !node.expanded;li.querySelector("ul")?.classList.toggle("hidden");li.querySelector(".node-label").firstChild.textContent = node.expanded ? '▼' : '?';});// 遞歸渲染子節點const ch
)
