HTML 使用 HTML 和 CSS 制作可折叠列表

在本文中，我们将介绍如何使用 HTML 和 CSS 创建可折叠列表。可折叠列表是一种常见的网页内容组织方式，在默认情况下只显示列表的标题，点击标题后可以展开或收起列表项。通过使用 HTML 和 CSS，我们可以实现这种交互效果，并为用户提供更好的阅读体验。

阅读更多：HTML 教程

HTML 结构

我们首先来定义 HTML 结构。一个基本的可折叠列表通常包含一个标题和一个具体内容的区域。下面是一个简单的示例：

<div class="collapsible">
  <h2 class="title">标题</h2>
  <div class="content">
    <p>具体内容</p>
  </div>
</div>

在这个示例中，我们使用了一个 div 元素作为容器，并为其添加了一个 class 属性“collapsible”。其中包含了一个 h2 元素，用于显示标题，并添加了一个 class 属性“title”。另外，还包含一个 div 元素，用于显示具体的内容，并添加了一个 class 属性“content”。

CSS 样式

接下来，我们需要使用 CSS 样式来定义可折叠列表的外观和交互效果。我们需要隐藏内容区域，当点击标题时，内容区域才会显示出来。

.collapsible .content {
  display: none;
}

.collapsible.open .content {
  display: block;
}

上面的样式代码中，我们首先使用 display: none; 将内容区域隐藏起来。然后，通过添加 .open 类来控制内容区域的显示或隐藏。当列表处于展开状态时，添加 .open 类，此时内容区域将通过 display: block; 显示出来。

JavaScript 交互

为了实现点击标题展开或收起内容的功能，我们还需要使用 JavaScript 来添加交互行为。

document.querySelectorAll('.collapsible').forEach(function(item) {
  item.addEventListener('click', function() {
    this.classList.toggle('open');
  });
});

上面的代码使用了 querySelectorAll 方法选择所有的 .collapsible 元素，并为每个元素添加了一个点击事件监听器。当点击元素时，将其自身的类名切换为 open，以实现展开或收起的功能。

完整示例

下面是一个完整的可折叠列表示例，展示了如何使用 HTML、CSS 和 JavaScript 实现该功能：

<!DOCTYPE html>
<html>
<head>
  <title>Collapsible List</title>
  <style>
    .collapsible .content {
      display: none;
    }

    .collapsible.open .content {
      display: block;
    }
  </style>
  <script>
    document.querySelectorAll('.collapsible').forEach(function(item) {
      item.addEventListener('click', function() {
        this.classList.toggle('open');
      });
    });
  </script>
</head>
<body>
  <div class="collapsible">
    <h2 class="title">标题一</h2>
    <div class="content">
      <p>内容一</p>
    </div>
  </div>
  <div class="collapsible">
    <h2 class="title">标题二</h2>
    <div class="content">
      <p>内容二</p>
    </div>
  </div>
</body>
</html>