使用 HTML、CSS 和 JavaScript 在滚动上创建收缩标题

在网页中，经常会遇到需要展开或收缩内容的情况，例如，展开一篇文章的评论，收缩一些选项，等等。本文将介绍如何使用 HTML、CSS 和 JavaScript 在滚动上创建收缩标题。

HTML

首先，我们需要在 HTML 中创建标题和内容的结构。我们可以使用 div 元素来包含一个标题和一个内容区域：

<div class="expandable">
  <div class="header">
    <h2>Title</h2>
  </div>
  <div class="content">
    <p>Content goes here.</p>
  </div>
</div>

在这个例子中，我们给最外层的 div 元素添加了一个类名 expandable。我们还可以给标题和内容分别添加类名 header 和 content。这些类名将在 CSS 中使用。

CSS

接下来，我们需要使用 CSS 样式来隐藏内容区域，并设置展开和收缩的动画效果。

.expandable .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.expandable.active .content {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

这个 CSS 样式的作用是将内容区域的最大高度设置为 0，使其隐藏起来。我们还为 .content 添加了 transition 属性，使展开和收缩的效果更加平滑。

我们还为 .expandable.active .content 添加了另一组样式，当 .expandable 元素被激活时，即被用户点击后，展开内容区域。这里我们将最大高度设置为 500px，你可以根据实际需求进行修改。

JavaScript

最后，我们需要使用 JavaScript 来添加事件监听器，当用户点击标题时，切换 .expandable 元素的状态。

const expanders = document.querySelectorAll(".expandable");

expanders.forEach(expander => {
  const header = expander.querySelector(".header");

  header.addEventListener("click", () => {
    expander.classList.toggle("active");
  });
});

这里我们使用了 document.querySelectorAll() 方法来选择所有带有类名 expandable 的元素。然后我们使用 forEach() 循环遍历每个元素，并为每个元素的标题添加一个 click 事件监听器。当用户点击标题时，我们使用 classList.toggle() 方法来切换元素的状态。

完整代码

综合上述的 HTML、CSS、JavaScript 代码片段，我们得到以下完整代码：

<div class="expandable">
  <div class="header">
    <h2>Title</h2>
  </div>
  <div class="content">
    <p>Content goes here.</p>
  </div>
</div>

<style>
  .expandable .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .expandable.active .content {
    max-height: 500px;
    transition: max-height 0.5s ease-in;
  }
</style>

<script>
  const expanders = document.querySelectorAll(".expandable");

  expanders.forEach(expander => {
    const header = expander.querySelector(".header");

    header.addEventListener("click", () => {
      expander.classList.toggle("active");
    });
  });
</script>

运行这段代码，你将看到一个可收缩的标题和内容区域。

延伸阅读

如果想要进一步了解如何优化收缩标题的效果，可以参考以下文章：

• Collapsible Content Using JavaScript
• Accordion with CSS and JavaScript