当前位置：首页 > JavaScript

js实现tree实现树菜单

2026-03-15 12:54:37JavaScript

实现树形菜单的 JavaScript 方法

使用 JavaScript 实现树形菜单可以通过多种方式完成，以下是几种常见的方法：

递归渲染树形结构

递归是处理树形结构的经典方法，适合嵌套层级不确定的情况。通过递归函数遍历数据并动态生成 DOM 元素。

js实现tree实现树菜单

function createTree(container, data) {
  const ul = document.createElement('ul');

  data.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name;

    if (item.children && item.children.length > 0) {
      createTree(li, item.children);
    }

    ul.appendChild(li);
  });

  container.appendChild(ul);
}

// 示例数据
const treeData = [
  {
    name: '节点1',
    children: [
      {name: '子节点1'},
      {name: '子节点2'}
    ]
  },
  {
    name: '节点2',
    children: [
      {
        name: '子节点3',
        children: [
          {name: '孙节点1'}
        ]
      }
    ]
  }
];

createTree(document.getElementById('tree-container'), treeData);

使用模板引擎

现代前端框架如 Vue、React 或 Angular 提供了更简洁的模板语法来渲染树形结构。以 Vue 为例：

// Vue 组件示例
Vue.component('tree-node', {
  props: ['node'],
  template: `
    <li>
      {{ node.name }}
      <ul v-if="node.children">
        <tree-node 
          v-for="child in node.children"
          :node="child"
          :key="child.id">
        </tree-node>
      </ul>
    </li>
  `
});

new Vue({
  el: '#app',
  data: {
    treeData: [
      // 同上示例数据结构
    ]
  }
});

动态加载与交互

实现可折叠的树形菜单需要添加事件监听器来控制子节点的显示/隐藏：

js实现tree实现树菜单

function createInteractiveTree(container, data) {
  const ul = document.createElement('ul');

  data.forEach(item => {
    const li = document.createElement('li');
    const span = document.createElement('span');
    span.textContent = item.name;

    if (item.children) {
      span.classList.add('caret');
      span.addEventListener('click', function() {
        this.parentElement.querySelector('.nested').classList.toggle('active');
        this.classList.toggle('caret-down');
      });

      const nestedUl = document.createElement('ul');
      nestedUl.classList.add('nested');
      createInteractiveTree(nestedUl, item.children);
      li.appendChild(span);
      li.appendChild(nestedUl);
    } else {
      li.appendChild(span);
    }

    ul.appendChild(li);
  });

  container.appendChild(ul);
}

CSS 样式建议

为树形菜单添加基本样式可以提升用户体验：

ul {
  list-style-type: none;
  padding-left: 20px;
}

.caret {
  cursor: pointer;
  user-select: none;
}

.caret::before {
  content: "▶";
  color: #666;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  transform: rotate(90deg);
}

.nested {
  display: none;
}

.nested.active {
  display: block;
}

性能优化建议

对于大型树形结构，考虑以下优化方案：

虚拟滚动技术（只渲染可视区域内的节点）
懒加载子节点（点击时再加载下级数据）
使用文档片段（DocumentFragment）减少重绘

// 使用文档片段优化
function createTreeOptimized(container, data) {
  const fragment = document.createDocumentFragment();
  const ul = document.createElement('ul');

  data.forEach(item => {
    // ...同上创建逻辑
    ul.appendChild(li);
  });

  fragment.appendChild(ul);
  container.appendChild(fragment);
}

这些方法可以根据具体需求组合使用，构建出功能完善、性能优良的树形菜单组件。