CSS 可展开的树形菜单列表

在本文中，我们将介绍如何使用CSS创建可展开的树形菜单列表。树形菜单是一种常见的导航模式，它可以帮助用户快速浏览和选择多层级的内容。

阅读更多：CSS 教程

什么是树形菜单列表？

树形菜单列表是一种具有层级结构的导航菜单，每个菜单项下可以包含子菜单项。用户可以通过单击父菜单项旁边的“展开”按钮或者直接点击父菜单项来展开或者折叠子菜单项。

使用无序列表（

ul>和

）创建树形结构

在HTML中，我们可以使用无序列表(<ul>)和列表项(<li>)来创建树形结构。每个父菜单项使用一个<li>元素表示，子菜单项可以嵌套在父菜单项的<ul>元素内部。

<ul class="tree-menu">
  <li>菜单项1
    <ul>
      <li>子菜单项1</li>
      <li>子菜单项2</li>
    </ul>
  </li>
  <li>菜单项2</li>
</ul>

上述代码创建了一个简单的树形菜单列表，其中有两个菜单项，第一个菜单项有两个子菜单项。我们可以根据需要添加更多的菜单项和子菜单项。

使用CSS样式美化树形菜单列表

为了让树形菜单列表看起来更加美观和易于使用，我们可以使用CSS样式对其进行美化。以下是一些常用的CSS样式属性和方法：

list-style-type：设置列表项符号的样式，如实心圆圈、数字、字母等。
padding：设置列表项的内边距，增加菜单项的间距。
background-color：设置菜单项的背景颜色。
color：设置菜单项的文本颜色。
border：设置菜单项的边框样式。
text-decoration：设置菜单项的文本装饰，如下划线。

下面的CSS代码演示了如何使用上述属性样式化树形菜单列表：

.tree-menu {
  list-style-type: none;
  padding: 0;
}

.tree-menu li {
  position: relative;
  padding: 10px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}

.tree-menu li:before {
  content: "";
  position: absolute;
  top: 10px;
  left: -20px;
  width: 10px;
  height: 10px;
  background-color: #ccc;
}

.tree-menu li:after {
  content: "";
  position: absolute;
  top: 10px;
  left: -15px;
  width: 1px;
  height: 100%;
  background-color: #ccc;
}

.tree-menu li > ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.tree-menu li.show > ul {
  max-height: 1000px;
}

上述代码通过设置菜单项的背景颜色、内边距、边框样式等属性，使树形菜单列表更具可读性和美观性。

添加交互功能 – 展开和折叠

为了使树形菜单列表具有展开和折叠功能，我们可以使用JavaScript来控制菜单项的显示和隐藏。以下是一段简单的JavaScript代码，实现了这个功能：

document.addEventListener("DOMContentLoaded", function() {
  var treeMenuItems = document.querySelectorAll(".tree-menu > li");

  treeMenuItems.forEach(function(item) {
    var expandButton = document.createElement("button");
    expandButton.innerText = "展开";
    item.prepend(expandButton);

    expandButton.addEventListener("click", function() {
      item.classList.toggle("show");
    });
  });
});

上述代码为每个菜单项添加了一个“展开”按钮，并通过点击按钮切换菜单项的show类名来实现菜单项的展开和折叠。