当前位置: 首页 > news >正文

JavaScript 树形菜单总结

树形菜单是前端开发中常见的交互组件,用于展示具有层级关系的数据(如文件目录、分类列表、组织架构等)。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。

一、核心概念

  • 层级结构:数据以父子嵌套形式存在,如{ 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 操作

核心步骤

  1. 定义递归函数,根据数据生成节点 DOM。
  2. 为父节点添加点击事件,控制子节点显示 / 隐藏。
  3. 处理特殊状态(如禁用、默认展开)。

示例代码片段

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
http://www.dtcms.com/a/272066.html

相关文章:

  • 2025社交电商新风口:推客小程序的商业逻辑与技术实现
  • 数据结构与算法之美:广义表
  • 通过vue如何利用 Three 绘制 简单3D模型(源码案例)
  • Redis中BigKey的隐患
  • Mysql分片:一致性哈希算法
  • 服务器内核级故障排查
  • 【计算机网络】HTTP1.0 HTTP1.1 HTTP2.0 QUIC HTTP3 究极总结
  • 【Python办公】使用Python和Tkinter构建Excel数据导入MySQL工具(GUI版)
  • 如何排查处理机械臂算法不精准问题?
  • 在徐州网络中服务器租用与托管的优势
  • LangChain框架 Prompts、Agents 应用
  • 浅克隆 深克隆
  • mvn能只test单独一个文件吗
  • vscode和插件用法
  • 数据分析中的拉链表解析
  • 网络安全初级
  • 从Rust模块化探索到DLB 2.0实践|得物技术
  • Linux进程——进程状态
  • ZW3D 二次开发-创建球体
  • 自动驾驶大模型---聊一聊特斯拉的FSD端到端系统
  • 自动驾驶数据集综述:统计特征、标注质量与未来展望
  • 一句话理解 ——【单点登录】
  • 【性能测试】jmeter+Linux环境部署和分布式压测,一篇打通...
  • 阿里云错题集分享
  • 在IDEA中无缝接入DeepSeek:智能编程助手指南
  • 如何把Arduino IDE中ESP32程序bin文件通过乐鑫flsah_download_tool工具软件下载到ESP32中
  • 探索Alibaba-NLP/WebAgent:迈向智能信息搜索新时代
  • Android 如何阻止应用自升级
  • Kafka的无消息丢失配置怎么实现
  • 快速将照片从三星手机传输到电脑