在HTML中实现内容的展开与收起功能，主要有两种常用方式，最简便的是使用HTML5原生的`与标签，无需编写JavaScript即可实现基础的折叠交互，若需自定义样式或添加平滑动画效果，则通常结合CSS与JavaScript，通过监听点击事件动态切换类名，控制容器的max-height或display`属性来实现显隐切换，这两种方法分别适用于简单的静态页面与复杂的交互场景。
HTML展开收起功能的5种实现方式：从基础到精通
展开收起（Accordion）是网页交互设计中不可或缺的组件，广泛应用于FAQ列表、长文本折叠、侧边栏导航等场景，本文系统梳理从原生HTML到高级JavaScript的5种实现方案,助你根据项目需求选择最优解。
为什么需要展开收起功能？
- 空间优化：通过渐进式内容展示降低页面滚动压力
- 体验提升：减少信息过载，引导用户按需探索内容
- 典型场景：产品参数展示、代码高亮折叠、多级菜单、评论回复嵌套
HTML5原生语义化方案（<details> + <summary>）
无需额外代码的零成本实现方案,符合W3C标准语义。
<details class="semantic-accordion">
<summary>点击查看技术原理</summary>
<p>该方案基于HTML5原生标签，通过浏览器内置行为实现交互。</p>
<ul>
<li>自动生成可点击标题</li>
<li>支持键盘操作（Enter/Space）</li>
<li>默认展开状态可通过open属性控制</li>
</ul>
</details>
核心优势：
- 零依赖实现，天然支持SEO爬取
- 内置无障碍访问支持（ARIA属性自动生成）
- 移动端触摸体验优化
局限性：
- 样式定制能力有限（需浏览器前缀处理）
- IE11及以下版本完全不支持
- 无法实现多面板互斥展开
进阶样式定制：
/* 基础样式重置 */
details.semantic-accordion {
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 12px;
transition: box-shadow 0.2s;
}
details[open] {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* 自定义标题样式 */
summary {
padding: 16px 20px;
cursor: pointer;
font-weight: 600;
list-style: none;
position: relative;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: "▶";
position: absolute;
right: 20px;
transition: transform 0.3s;
}
details[open] summary::after {
transform: rotate(90deg);
}区域动画 */
details > *:not(summary) {
padding: 0 20px 20px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
纯CSS状态切换方案（Checkbox Hack）
利用CSS的:checked伪类实现状态驱动的动画效果。
<div class="css-accordion">
<input type="checkbox" id="css-toggle" class="accordion-toggle">
<label for="css-toggle" class="accordion-header">
<span>CSS动画实现原理</span>
<span class="toggle-icon">◀</span>
</label>
<div class="accordion-body">
<p>通过CSS选择器实现状态绑定：</p>
<code>.accordion-toggle:checked + .accordion-header + .accordion-body</code>
</div>
</div>
.css-accordion {
margin-bottom: 16px;
}
.accordion-toggle {
position: absolute;
opacity: 0;
}
.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
}
.accordion-header:hover {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}
.toggle-icon {
transition: transform 0.3s;
}
.accordion-toggle:checked + .accordion-header .toggle-icon {
transform: rotate(180deg);
}
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
border-radius: 0 0 6px 6px;
}
.accordion-toggle:checked + .accordion-header + .accordion-body {
max-height: 500px;
padding: 16px 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
技术要点：
- 利用相邻兄弟选择器实现状态传递
- 通过transition实现平滑高度变化
- 支持CSS变量动态控制动画参数
适用场景展示、简单交互需求、无JS环境
JavaScript可控方案（推荐）
兼顾灵活性与性能的工业级实现方案。
<div class="js-accordion" data-accordion>
<button class="accordion-trigger" aria-expanded="false" aria-controls="panel-1">
<span>JavaScript动态控制</span>
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div id="panel-1" class="accordion-panel
