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

创建滚动时收缩标题是一种非常有用的 UI 设计技术，可以节省空间并为用户提供更好的阅读体验。同时，创建收缩标题也是一项相对容易的任务，只需要简单的 HTML、CSS 和 JavaScript 技能即可。

HTML 结构

首先，我们需要创建 HTML 结构来容纳标题和内容。我们将使用一个简单的 div 元素来作为我们的容器（可以是 body 元素，也可以是其他任何元素）：

<div class="container">
  <h2 class="heading">标题1</h2>
  <p class="content">内容1</p>
  
  <h2 class="heading">标题2</h2>
  <p class="content">内容2</p>
  
  <h2 class="heading">标题3</h2>
  <p class="content">内容3</p>
  
  <!-- 这里可以添加更多的标题和内容 -->
  
</div>

CSS 样式

我们将使用 CSS 样式来将标题和内容放在一起，并使其看起来更像一个收缩列表。

首先，我们将隐藏所有内容：

.container .content {
  display: none;
}

然后，我们将为每个标题添加一个背景色和滑动动画效果：

.container .heading {
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

最后，我们将为展开的内容添加一些样式。我们将使用 CSS 类来标识哪些内容应该显示：

.container .active {
  display: block;
}

JavaScript 功能

现在我们已经有了 HTML 结构和 CSS 样式，我们需要添加 JavaScript 功能来使其工作。我们将使用事件监听器来监听标题的点击事件，然后显示或隐藏相应的内容。

我们将首先为所有标题添加同一个事件监听器。当用户点击某个标题时，我们需要查找与其关联的内容，然后将其显示或隐藏。

const headings = document.querySelectorAll('.heading');

headings.forEach((heading) => {
  heading.addEventListener('click', () => {
    // 查找相应的内容
    const content = heading.nextElementSibling;
    
    // 切换内容的可见性
    content.classList.toggle('active');
  });
});

在这个代码段中，我们首先使用 querySelectorAll 方法查找所有标题元素。然后，我们使用 forEach 循环遍历每个标题，并为其添加一个点击事件监听器。

当用户点击一个标题时，我们使用 nextElementSibling 方法查找与其关联的内容。然后，我们使用 classList.toggle 方法来切换内容的可见性。

完整代码

完整的 HTML、CSS 和 JavaScript 代码如下：

<div class="container">
  <h2 class="heading">标题1</h2>
  <p class="content">内容1</p>
  
  <h2 class="heading">标题2</h2>
  <p class="content">内容2</p>
  
  <h2 class="heading">标题3</h2>
  <p class="content">内容3</p>
  
  <!-- 这里可以添加更多的标题和内容 -->
  
</div>

<style>
.container .content {
  display: none;
}

.container .heading {
  background-color: #eee;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.container .active {
  display: block;
}
</style>

<script>
const headings = document.querySelectorAll('.heading');

headings.forEach((heading) => {
  heading.addEventListener('click', () => {
    // 查找相应的内容
    const content = heading.nextElementSibling;
    
    // 切换内容可见性
    content.classList.toggle('active');
  });
});
</script>

这项技术可以应用于各种情况，在 UI 设计和用户交互中非常有用。希望这个教程能够帮助你学会如何使用 HTML、CSS 和 JavaScript 来创建收缩标题。