使用纯 JavaScript 创建可折叠 - CSS

在本文中，我们将讨论如何使用纯 JavaScript 创建可折叠 - CSS。如果你想为你的网页添加有趣的效果，那么这篇文章一定是你不能错过的。

什么是可折叠 - CSS？

可折叠 - CSS 是一种 CSS 技术，可以帮助你创建一个可以展开和收起的网页元素。这可以很好地帮助用户更好地组织和导航网页内容，也可以添加更多的互动性和趣味性。

如何使用 JavaScript 创建可折叠 - CSS？

创建 HTML 结构

首先，我们需要创建一个 HTML 结构来容纳我们的可折叠 - CSS。

<div class="accordion">
  <div class="accordion-header">折叠1</div>
  <div class="accordion-content">隐藏内容1</div>
  <div class="accordion-header">折叠2</div>
  <div class="accordion-content">隐藏内容2</div>
  <div class="accordion-header">折叠3</div>
  <div class="accordion-content">隐藏内容3</div>
</div>

在上面的代码中，我们创建了一个 div 元素，并为其指定一个类名为 accordion。接下来，我们创建了一组通过折叠 - CSS 实现的可折叠元素，包含一个折叠标签和一个隐藏内容标签。

添加 CSS 样式

接下来，我们需要添加一些 CSS 样式来帮助我们实现可折叠 - CSS 效果。

.accordion-header {
  cursor: pointer;
}

.accordion-content {
  display: none;
}

在上面的代码中，我们为折叠标签指定了一个指针的鼠标形状，用来提示用户这个元素可以点击展开收起。我们还将隐藏内容标签的 display 属性设置为 none，以隐藏它们。

添加 JavaScript 代码

现在，我们已经准备好添加 JavaScript 代码，以实现可折叠 - CSS 效果。

const headers = document.querySelectorAll(".accordion-header");

headers.forEach((header) => {
  header.addEventListener("click", () => {
    const content = header.nextElementSibling;
    content.style.display = content.style.display === "none" ? "block" : "none";
  });
});

在上面的代码中，我们首先查询所有的折叠标签，并使用 forEach() 方法为每个标签添加一个单击事件监听器。当用户单击标签时，我们将查询隐藏内容标签，并通过修改它们的 display 属性，实现展开或收起的效果。

总结

这就是我们如何使用纯 JavaScript 创建可折叠 - CSS 的方法。代码非常简单，但效果却非常棒。如果你觉得这篇文章对你有所帮助，请给它一个点赞，让更多的人看到它。谢谢！