javascript 实现折叠面板需用 button 触发、max-height 过渡动画控制显示隐藏，通过 scrollheight 动态设置高度，配合 aria-expanded 等属性保障可访问性，并支持多面板及手风琴模式。
用 JavaScript 实现折叠面板的展开与收起，核心是控制面板内容区域的 显示/隐藏 和 高度过渡动画，同时切换触发按钮（如标题）的状态（例如添加/移除 class、更新文字或图标）。不需要依赖框架，原生 DOM 操作就能完成。
1. HTML 结构要清晰分层
一个典型的折叠面板包含：触发区域（如标题）、内容区域（需要展开/收起的部分），并建议用语义化标签包裹：
<div class="accordion-item">
<button class="accordion-header">常见问题</button>
<div class="accordion-content">
<p>这里是折叠的内容……</p>
</div>
</div>
关键点：
• 使用 button 而非 div 做触发器，保障可访问性；
• 内容区默认加 style="display: none" 或通过 CSS 控制初始状态；
• 用 class 区分不同状态（如 .is-open），便于样式和逻辑联动。
2. JS 控制显示与过渡动画
直接操作 display 会丢失 CSS 过渡效果，推荐用 max-height 或 height 配合 overflow: hidden 实现平滑动画：
- 先获取内容元素的真实高度：
content.scrollHeight - 展开时：设
maxHeight为该高度值；收起时：设为0 - 配合 CSS 的
transition: max-height 0.3s ease - 动画结束后，再设置
display: none（收起）或清除内联样式（展开），避免影响后续 JS 判断
示例关键代码：
const header = document.querySelector('.accordion-header');
const content = document.querySelector('.accordion-content');
header.addEventListener('click', () => {
const isOpen = content.style.maxHeight;
if (isOpen) {
content.style.maxHeight = '0';
content.style.overflow = 'hidden';
setTimeout(() => {
content.style.display = 'none';
}, 300);
} else {
content.style.display = 'block';
content.style.maxHeight = content.scrollHeight + 'px';
}
});
3. 支持多面板与手风琴模式
多个面板共存时，需避免互相干扰。常用策略：
- 用
document.querySelectorAll('.accordion-header')批量绑定事件 - 每个点击事件中，只操作「当前 header 的下一个兄弟元素」（即对应 content）
- 如需手风琴效果（一次只开一个），先遍历关闭所有其他面板，再展开当前
- 用
dataset或自定义属性关联 header 与 content（如data-target="#faq-1"），提升灵活性
4. 可访问性与用户体验细节
真正可用的折叠面板不能只靠视觉变化：
- 用
aria-expanded="true/false"标注按钮状态，并同步更新 - 用
aria-controls="content-id"关联按钮与内容区 ID - 内容区加
role="region"，并设置aria-labelledby - 支持键盘操作：Enter / Space 键触发切换，Tab 可聚焦到每个 header
这些属性只需在 JS 中一并设置，例如：header.setAttribute('aria-expanded', 'true');content.setAttribute('id', 'panel-1');header.setAttribute('aria-controls', 'panel-1');
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
