📌  相关文章
📜  使用 HTML、CSS 和 JavaScript 在树视图架构中创建目录(1)

📅  最后修改于: 2023-12-03 15:22:12.181000             🧑  作者: Mango

使用 HTML、CSS 和 JavaScript 在树视图架构中创建目录

在网站或应用程序中，当我们需要展示一系列的文件或文件夹时，通常使用树状结构将它们展开，并以目录形式呈现。本文将介绍如何使用 HTML、CSS 和 JavaScript 在树视图架构中创建目录。

前置知识
  • HTML：了解 HTML 标签的基本语法和用途；
  • CSS：了解基本的 CSS 属性和样式表的语法；
  • JavaScript：了解基本的语法和 DOM（文档对象模型）的概念。
实现思路

树视图主要由两部分组成：树节点和节点内容。树节点用来显示目录结构，节点内容用来显示具体的文件和文件夹。

我们的实现思路是：通过 HTML 创建树节点，通过 CSS 设置节点样式，通过 JavaScript 动态渲染节点内容，使目录动态更新。

HTML 结构

在 HTML 中，我们需要定义树节点的结构。树节点由一个容器元素（<ul> 或 <ol>）和多个列表项元素（<li>）组成。每个列表项元素包括两部分内容：节点标记和节点内容。

<ul id="tree">
  <li>
    <span class="folder">Folder 1</span>
    <ul>
      <li>
        <span class="file">file1.txt</span>
      </li>
      <li>
        <span class="file">file2.txt</span>
      </li>
    </ul>
  </li>
  <li>
    <span class="folder">Folder 2</span>
    <ul>
      <li>
        <span class="file">file3.txt</span>
      </li>
      <li>
        <span class="file">file4.txt</span>
      </li>
    </ul>
  </li>
</ul>
CSS 样式

在 CSS 中，我们需要为树节点设置样式。主要是设置节点的外观（如背景色、字体等）和节点状态（如展开或折叠）。

/* 树节点容器 */
#tree {
  margin: 0;
  padding: 0;
}

/* 树节点列表项 */
#tree li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  
  /* 节点标记 */
  padding-left: 1em;

  /* 节点状态 */
  line-height: 1.5em;
}
/* 节点标记样式 */
#tree li:before {
  content: "";
  position: absolute;
  left: -0.5em;
  top: 0.8em;
  border-left: 1px solid #ccc;
  height: calc(100% - 1.5em);
}
/* 展开状态 */
#tree li.open:before {
  content: "";
  position: absolute;
  left: -0.5em;
  top: 0.8em;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: none;
  height: calc(100% - 1.5em);
  width: 1em;
  transform: rotate(45deg);
}
/* 关闭状态 */
#tree li.closed:before {
  content: "";
  position: absolute;
  left: -0.5em;
  top: 0.8em;
  border-left: 1px solid #ccc;
  border-bottom: none;
  border-top: 1px solid #ccc;
  height: calc(100% - 1.5em);
  width: 1em;
  transform: rotate(-45deg);
}

/* 文件夹的节点标记 */
#tree .folder:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 1em;
  border: 0.3em solid transparent;
  border-left-color: #000;
  vertical-align: middle;
}

/* 文件的节点标记 */
#tree .file:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.5em;
  border: 0.3em solid transparent;
  border-bottom-color: #000;
  vertical-align: middle;
}
JavaScript 动态渲染

在 JavaScript 中，我们需要编写逻辑代码，实现点击节点时动态更新节点状态和内容。

首先，我们需要给每个树节点设置一个状态（open 或 closed），表示节点当前的状态是展开还是折叠。初始状态可以设置为 closed，即所有节点都是折叠状态。

const tree = document.getElementById('tree');
const nodes = tree.querySelectorAll('li');

nodes.forEach(node => {
  const ul = node.querySelector('ul');
  if (ul) {
    node.className = 'closed';
  } else {
    node.className = 'file';
  }
});

然后，我们需要监听树节点的点击事件，并根据节点的状态切换节点的状态和内容。

nodes.forEach(node => {
  const ul = node.querySelector('ul');
  if (ul) {
    node.addEventListener('click', event => {
      event.stopPropagation();
      node.classList.toggle('open');
    });
  }
});
完整的代码

将 HTML、CSS、JavaScript 结合起来，就可以实现一个简单的树视图目录。完整的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tree View</title>
  <style>
    /* 树节点容器 */
    #tree {
      margin: 0;
      padding: 0;
    }
    /* 树节点列表项 */
    #tree li {
      margin: 0;
      padding: 0;
      list-style: none;
      position: relative;

      /* 节点标记 */
      padding-left: 1em;

      /* 节点状态 */
      line-height: 1.5em;
    }
    /* 节点标记样式 */
    #tree li:before {
      content: "";
      position: absolute;
      left: -0.5em;
      top: 0.8em;
      border-left: 1px solid #ccc;
      height: calc(100% - 1.5em);
    }
    /* 展开状态 */
    #tree li.open:before {
      content: "";
      position: absolute;
      left: -0.5em;
      top: 0.8em;
      border-left: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      border-top: none;
      height: calc(100% - 1.5em);
      width: 1em;
      transform: rotate(45deg);
    }
    /* 关闭状态 */
    #tree li.closed:before {
      content: "";
      position: absolute;
      left: -0.5em;
      top: 0.8em;
      border-left: 1px solid #ccc;
      border-bottom: none;
      border-top: 1px solid #ccc;
      height: calc(100% - 1.5em);
      width: 1em;
      transform: rotate(-45deg);
    }
    /* 文件夹的节点标记 */
    #tree .folder:before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      margin-right: 1em;
      border: 0.3em solid transparent;
      border-left-color: #000;
      vertical-align: middle;
    }
    /* 文件的节点标记 */
    #tree .file:before {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      margin-right: 0.5em;
      border: 0.3em solid transparent;
      border-bottom-color: #000;
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <ul id="tree">
    <li>
      <span class="folder">Folder 1</span>
      <ul>
        <li>
          <span class="file">file1.txt</span>
        </li>
        <li>
          <span class="file">file2.txt</span>
        </li>
      </ul>
    </li>
    <li>
      <span class="folder">Folder 2</span>
      <ul>
        <li>
          <span class="file">file3.txt</span>
        </li>
        <li>
          <span class="file">file4.txt</span>
        </li>
      </ul>
    </li>
  </ul>
  <script>
    const tree = document.getElementById('tree');
    const nodes = tree.querySelectorAll('li');

    /* 初始化节点状态 */
    nodes.forEach(node => {
      const ul = node.querySelector('ul');
      if (ul) {
        node.className = 'closed';
      } else {
        node.className = 'file';
      }
    });

    /* 监听节点点击事件 */
    nodes.forEach(node => {
      const ul = node.querySelector('ul');
      if (ul) {
        node.addEventListener('click', event => {
          event.stopPropagation();
          node.classList.toggle('open');
        });
      }
    });
  </script>
</body>
</html>
总结

本文介绍了如何使用 HTML、CSS 和 JavaScript 在树视图架构中创建目录。通过 HTML 定义树节点结构，通过 CSS 设置节点样式，通过 JavaScript 动态渲染节点内容，实现了一个简单的树状目录。开发者可以根据实际需求进行扩展，如增加节点搜索、拖拽等功能，实现更加丰富多彩的树状目录。