js生成动态html文件树，支持多层级，文件夹可展开和收缩，点击文件可跳转到对应文件

您好！以下是一个支持多层级、文件夹可展开和收缩、点击文件可跳转到对应文件的示例代码：

HTML部分：

<div id="tree"></div>

JS部分：

// 定义一个树形结构的数据
var data = {
  name: "Root",
  type: "folder",
  children: [
    {
      name: "Level 1-1",
      type: "folder",
      children: [
        { name: "Level 2-1", type: "file", url: "file1.html" },
        { name: "Level 2-2", type: "file", url: "file2.html" },
      ],
    },
    {
      name: "Level 1-2",
      type: "folder",
      children: [
        {
          name: "Level 2-3",
          type: "folder",
          children: [
            { name: "Level 3-1", type: "file", url: "file3.html" },
            { name: "Level 3-2", type: "file", url: "file4.html" },
          ],
        },
      ],
    },
  ],
};

// 生成树形结构的HTML代码
function generateHtmlTree(node) {
  var html = "";
  if (node.type == "folder") {
    html += '<div class="folder">';
    html +=
      '<span class="icon" onclick="toggleFolder(this)"><i class="fa fa-folder"></i></span>';
  } else {
    html += '<div class="file">';
    html +=
      '<span class="icon"><i class="fa fa-file"></i></span>';
  }
  if (node.url) {
    html += '<a href="' + node.url + '">' + node.name + "</a>";
  } else {
    html += node.name;
  }
  if (node.children) {
    html += "<ul>";
    for (var i = 0; i < node.children.length; i++) {
      html += "<li>" + generateHtmlTree(node.children[i]) + "</li>";
    }
    html += "</ul>";
  }
  html += "</div>";
  return html;
}

// 插入HTML代码到页面上
var tree = document.getElementById("tree");
tree.innerHTML = generateHtmlTree(data);

// 切换文件夹展开/收缩状态
function toggleFolder(icon) {
  var folder = icon.parentNode.parentNode;
  var ul = folder.querySelector("ul");
  if (ul) {
    if (ul.style.display == "none") {
      ul.style.display = "block";
      icon.innerHTML = '<i class="fa fa-folder-open"></i>';
    } else {
      ul.style.display = "none";
      icon.innerHTML = '<i class="fa fa-folder"></i>';
    }
  }
}

这段代码会生成一个树形结构的HTML文件树，可以支持多层级的节点，文件夹可展开和收缩，点击文件可跳转到对应文件。您需要引入FontAwesome库来显示文件夹和文件的图标，可以根据需要修改样式和数据来适应您的具体场景。