HTML5 JS树形菜单的实现流程

本文将介绍如何使用HTML5和JavaScript来实现一个简单的树形菜单，并教会刚入行的小白如何实现。下面是整个实现过程的流程图：

flowchart TD
    A[准备工作]
    B[创建HTML结构]
    C[添加CSS样式]
    D[编写JavaScript代码]
    E[初始化树形菜单]
    F[完成]
    A --> B
    B --> C
    C --> D
    D --> E
    E --> F

1. 准备工作

在开始实现之前，我们需要准备一些基本的工具和资源：

  • 一个文本编辑器（如VS Code）用于编写代码
  • 一个浏览器（如Chrome）用于预览效果
  • 一些基本的HTML和CSS知识
  • 一些基本的JavaScript知识

2. 创建HTML结构

首先，我们需要创建一个HTML文件，然后在文件中添加树形菜单的HTML结构。以下是一个简单的树形菜单的HTML结构示例：

<div id="tree">
  <ul>
    <li>
      <span class="expand">+</span>
      <a rel="nofollow" href="#">节点1</a>
      <ul>
        <li>
          <span class="expand">+</span>
          <a rel="nofollow" href="#">子节点1</a>
        </li>
        <li>
          <span class="expand">+</span>
          <a rel="nofollow" href="#">子节点2</a>
        </li>
      </ul>
    </li>
    <li>
      <span class="expand">+</span>
      <a rel="nofollow" href="#">节点2</a>
    </li>
  </ul>
</div>

在上述HTML结构中，我们使用了无序列表ul和列表项li来表示树形菜单的层级结构，并使用了span来表示节点的展开/折叠状态，使用a标签来表示节点的名称。

3. 添加CSS样式

为了让树形菜单看起来更美观，我们需要添加一些CSS样式。以下是一个简单的树形菜单的CSS样式示例：

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

#tree ul ul {
  display: none;
}

#tree li {
  margin-bottom: 5px;
}

#tree .expand {
  margin-right: 5px;
  cursor: pointer;
}

#tree .expand::before {
  content: "+";
}

#tree .collapse::before {
  content: "-";
}

上述CSS样式中，我们使用了一些基本的CSS属性来设置树形菜单的样式，如list-style-type用于去除无序列表的默认样式，padding-left用于控制缩进等。

4. 编写JavaScript代码

现在我们需要编写一些JavaScript代码来实现树形菜单的交互效果。以下是一个简单的树形菜单的JavaScript代码示例：

// 获取所有的展开/折叠按钮
var expandButtons = document.querySelectorAll("#tree .expand");

// 为展开/折叠按钮添加点击事件处理程序
expandButtons.forEach(function(button) {
  button.addEventListener("click", function() {
    // 切换展开/折叠状态
    button.classList.toggle("collapse");

    // 切换子节点的显示/隐藏状态
    var childNodes = button.parentNode.querySelector("ul");
    childNodes.style.display = childNodes.style.display === "none" ? "block" : "none";
  });
});

上述代码中，我们首先通过querySelectorAll方法获取所有的展开/折叠按钮，然后使用forEach方法为每个按钮添加点击事件处理程序。点击按钮时，我们通过classList.toggle方法切换按钮的展开/折叠状态，并通过style.display属性切换子节点的显示/隐藏状态。

5. 初始化树形菜单

最后，我们需要在页面加载完成时初始化树形菜单。以下是一个简单的初始化代码示例：

window.addEventListener("DOMContentLoaded", function() {
  // 手动展开第一级节点
  var rootNodes = document.querySelectorAll("#tree > ul > li");
  rootNodes.forEach(function(node) {
    var expandButton = node.querySelector(".expand");
    expandButton.click();