当前位置：首页 > 文章列表 > 文章 > 前端 > 手把手教你用HTML+CSS实现超酷手风琴Accordion效果

手把手教你用HTML+CSS实现超酷手风琴Accordion效果

2025-06-20 13:22:04 0浏览收藏

基本结构：用 HTML 定义内容块

手风琴的基本结构通常是一个容器包裹多个面板（panel），每个面板包含标题和内容区域。HTML 部分使用

这是第一个面板的内容。

这是第二个面板的内容。

这样写的好处是语义清晰，按钮用于触发交互，内容区域可以灵活添加任意 HTML 内容。

样式控制：用 CSS 实现展开与收起效果

CSS 主要用来控制样式和过渡动画。通过设置 .accordion-content 的 max-height 属性，并配合 overflow: hidden 和 transition，可以实现平滑的展开和收起效果。

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

.accordion-item.active .accordion-content {
  max-height: 200px; /* 根据实际内容调整 */
  transition: max-height 0.35s ease-in;
}

这里的关键是初始状态为“隐藏”，当某个 item 被激活时才改变 max-height，从而让内容显现出来。

添加交互：用 JavaScript 控制展开与收起

JavaScript 是实现手风琴交互的核心部分。你可以为每个 header 添加点击事件监听器，点击后切换当前 item 的 active 状态，并关闭其他已经打开的面板（如果是单开模式）。

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

headers.forEach(header => {
  header.addEventListener('click', () => {
    const item = header.parentElement;
    const isActive = item.classList.contains('active');

    // 关闭所有面板
    document.querySelectorAll('.accordion-item').forEach(i => i.classList.remove('active'));

    // 如果原本没打开，就打开当前项
    if (!isActive) {
      item.classList.add('active');
    }
  });
});

这段代码实现了一个典型的单展开手风琴逻辑：点击某一项时，先关闭所有已展开项，再打开当前项。

基本上就这些。HTML 结构负责内容组织，CSS 控制外观和动画，JavaScript 实现交互逻辑。虽然不复杂，但在细节上要注意过渡时间、高度限制和状态管理，否则会出现动画卡顿或者状态不同步的问题。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《手把手教你用HTML+CSS实现超酷手风琴Accordion效果》文章吧，也可关注golang学习网公众号了解相关技术文章。