JS树形菜单源码解析,手把手教你实现可折叠导航

速达网络源码大全 2024-06-19 15:30:09 4

你是不是也遇到过这种情况？花三天写的树形菜单，展开到第五层就卡成PPT，点击事件像得了帕金森抖个不停？去年给政务系统做导航菜单时就栽过跟头——那个号称"高性能"的源码，加载5000节点直接让浏览器崩溃！今天咱们就掰开了揉碎了聊聊原生JS实现树形菜单的核心技巧，附带可商用的代码方案！

一、基础骨架：DOM与数据绑定

JS树形菜单源码解析,手把手教你实现可折叠导航-第1张图片

为啥要用递归生成菜单？ 就像搭积木，树形结构天生适合递归处理。看这段核心代码：

javascript**function createMenu(data) {  const ul = document.createElement('ul');  data.forEach(item => {    const li = document.createElement('li');    li.innerHTML = `<span>${item.label}span>`;    if (item.children) {      li.append(createMenu(item.children));      li.classList.add('has-child');    }    ul.append(li);  });  return ul;}

避坑要点：

数据格式标准化：必须包含label和children字段
层级限制：建议不超过6层嵌套（浏览器渲染瓶颈）
内存优化：500+节点时启用虚拟滚动

二、灵魂交互：展开/折叠的三种姿势

事件委托才是王道！ 别傻傻给每个按钮绑事件：

javascript**document.querySelector('.menu').addEventListener('click', e => {  const target = e.target.closest('.arrow');  if (!target) return;  const ul = target.nextElementSibling;  ul.style.display = ul.style.display === 'none' ? 'block' : 'none';  target.classList.toggle('rotate');});

性能对比表：

方案	千节点耗时	内存占用	适用场景
事件委托	15ms	50MB	通用方案
绑定	300ms	200MB	小型菜单
框架组件	30ms	80MB	复杂系统

三、数据驱动：动态过滤与搜索

关键词过滤怎么玩？ 递归+回溯算法搞定：

javascript**function filterTree(keyword, nodes) {  return nodes.filter(node => {    const children = node.children?.length      ? filterTree(keyword, node.children)      : [];    node.match = node.label.includes(keyword) || children.length > 0;    return node.match && { ...node, children };  });}

四个必备功能：

高亮匹配项：给匹配文字加标签
自动展开：过滤后默认展开所有层级
异步加载：大数据量时分页请求
缓存机制：记住上次搜索条件

四、实战升级：组件化封装

为啥要组件化？ 看看BUI框架的启示：

javascript**class TreeMenu extends HTMLElement {  constructor() {    super();    this._data = [];    this.attachShadow({ mode: 'open' });  }  set data(value) {    this._data = value;    this.render();  }  render() {    this.shadowRoot.innerHTML = `      <style>/* 内置样式 */style>      ${createMenu(this._data)}    `;  }}customElements.define('tree-menu', TreeMenu);