用js实现个树形菜单，一级树形名字为一级菜单，二级名字为二级菜单

在JavaScript中，我们可以使用递归的方式来实现一个简单的树形菜单。这里我们假设有一个数据结构，比如一个对象数组，其中每个对象代表一个菜单项，包含`text`（菜单名称）和`children`（子菜单项）属性。以下是一个基本的示例：

// 假设我们有以下数据
const menuData = [
  { id: 1, text: "一级菜单A", children: [{ id: 2, text: "二级菜单A1" }, { id: 3, text: "二级菜单A2" }] },
  { id: 4, text: "一级菜单B", children: [{ id: 5, text: "二级菜单B1" }, { id: 6, text: "二级菜单B2" }] },
];

// 定义渲染菜单的函数
function renderTree(items) {
  let html = "";
  for (let item of items) {
    html += `
      <ul>
        <li>${item.text} 
          <ul>
            ${renderTree(item.children)}
          </ul>
        </li>
      </ul>
    `;
  }
  return html;
}

// 获取HTML元素并插入生成的树形菜单
const container = document.getElementById("tree-menu");
container.innerHTML = renderTree(menuData);

这个例子中，我们首先遍历一级菜单，然后对每个一级菜单项，如果它有子菜单，就递归地调用`renderTree`函数生成子菜单。最后将所有生成的内容插入到页面指定的位置。