如何使用 CSS 实现一个手风琴 (Accordion) 效果？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

// www.javascriptcn.com code example
<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">Section 1</button>
    <div class="accordion-content">
      <p>Content for Section 1.</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header">Section 2</button>
    <div class="accordion-content">
      <p>Content for Section 2.</p>
    </div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header">Section 3</button>
    <div class="accordion-content">
      <p>Content for Section 3.</p>
    </div>
  </div>
</div>

// www.javascriptcn.com code example
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.accordion-header {
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  text-align: left;
  border: none;
  cursor: pointer;
  outline: none;
}


.accordion-item.active .accordion-content {
  max-height: 500px; /* 设置一个足够大的值 */
}


/* 使用js控制active类的添加和删除
   例如：
 const accordionItems = document.querySelectorAll('.accordion-item');
 accordionItems.forEach(item => {
   const header = item.querySelector('.accordion-header');
   header.addEventListener('click', () => {
     item.classList.toggle('active');
   });
 });
*/

本题详细解读

手风琴效果的核心在于使用 CSS 的 max-height 属性和 overflow: hidden 来控制内容的显示与隐藏，并通过 JavaScript 来切换 .active 类实现展开与收缩的动画效果。

HTML结构:

最外层容器 .accordion 用来包裹所有的手风琴项。
每个手风琴项 .accordion-item 包含一个头部 .accordion-header 和内容区 .accordion-content。
.accordion-header 使用 <button>，保证其可点击且有交互性。
.accordion-content 包含具体的文本或元素内容。

CSS样式:

隐藏内容：
- .accordion-content 初始 max-height 设置为 0，并使用 overflow: hidden 来隐藏超出部分。
- transition: max-height 0.3s ease-out; 添加过渡效果，使展开和收缩更平滑。
样式调整：
- .accordion-item 设置边框和外边距，形成分隔效果。
- .accordion-header 设置背景色、内边距、文本对齐等样式，并使用 cursor: pointer 表示可点击。
- border: none; outline: none; 清除按钮的默认样式。
展开效果：
- .accordion-item.active .accordion-content：当 .accordion-item 拥有 .active 类时，将 .accordion-content 的 max-height 设置为一个足够大的值（例如 500px），从而显示内容。实际应用中可以使用 auto 但会失去动画效果，所以这里使用预设值或者js计算高度。

JavaScript交互 (示例代码)

**选择元素：**使用document.querySelectorAll('.accordion-item');选择所有手风琴项。
**遍历并添加监听：**使用forEach遍历所有手风琴项，并为每个.accordion-header添加点击事件监听。
**切换类名：**点击时，使用 item.classList.toggle('active');切换手风琴项上的 .active 类，从而切换展开与收缩状态。

注意事项

.active 类的切换是通过 JavaScript 实现的。
.active 类的添加与移除触发了 CSS 的 max-height 过渡效果。
max-height 设置为一个足够大的值，是为了保证在各种内容高度下都能完全展开。
可以使用JS动态计算内容的高度，并将其赋值给max-height属性，以此达到自适应高度的效果，这里为了简化，使用预设值。
此实现方法避免了使用JS直接操作元素高度，充分利用了CSS的特性，提升了性能。

这种方式的手风琴效果实现简洁高效，易于理解和维护，在现代前端开发中被广泛使用。