[分享]css3收起展开效果

最近，CSS3 中的收起展开效果十分流行。这些效果可以帮助您提高您的网站的用户体验和视觉效果。在这篇文章中，我们将讨论如何使用 CSS3 实现这些流行的收起展开效果。// HTML 代码 第一个标...

最近，CSS3 中的收起展开效果十分流行。这些效果可以帮助您提高您的网站的用户体验和视觉效果。在这篇文章中，我们将讨论如何使用 CSS3 实现这些流行的收起展开效果。

// HTML 代码
<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">第一个标题</div>
    <div class="accordion-content">第一个内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">第二个标题</div>
    <div class="accordion-content">第二个内容</div>
  </div>
</div>

// CSS 代码
.accordion-item {
  border: 1px solid #ddd;
}

.accordion-header {
  background-color: #f7f7f7;
  cursor: pointer;
  padding: 10px;
}

.accordion-content {
  display: none;
  padding: 10px;
}

.accordion-header.active {
  background-color: #eee;
}

.accordion-header.active + .accordion-content {
  display: block;
} 

这段代码使用了 div 元素来表示每个折叠项。每个项包括一个标题和内容。标题和内容被包裹在一个类名为 "accordion-header" 和 "accordion-content" 的 div 内。默认情况下，内容的 display 属性为 none，这样它们就隐藏了。使用 JavaScript，我们添加一个事件监听器，当标题被点击时，运行一个函数来添加一个名为 "active" 的类名。这个类名可以用来到影响图片的样式。我们还在 CSS 中设置了新增该类名后内容的显示规则。当加上类名时，内容的 display 属性将被重置为“block”以显示出来。

收起展开效果是 CSS3 中的一个很有用的功能，它可以为您的网站增加很多价值，并为您的用户提供更好的体验。使用 CSS3 和 JavaScript，您可以轻松实现这些效果。