手风琴折叠面板通过dom操作实现单个展开：用button作标题，js遍历绑定click事件，点击时先关闭其他内容（max-height:0、aria-hidden="true"），再切换当前项的max-height和aria-hidden状态，配合css过渡动画。
用 DOM 操作实现手风琴（Accordion）折叠面板，核心是控制多个面板的展开/收起状态，每次只允许一个面板打开，点击标题切换对应内容的显示与隐藏。不需要框架，纯 JavaScript 就能搞定。
HTML 结构要清晰、语义化
每个面板由标题（button 或 h3）和内容区（div）组成，用父容器包裹。推荐用 button 作为标题，语义更明确，也自带可聚焦和键盘支持：
<div class="accordion">
<div class="accordion-item">
<button class="accordion-header">标题一</button>
<div class="accordion-content">这里是第一段内容…</div>
</div>
<div class="accordion-item">
<button class="accordion-header">标题二</button>
<div class="accordion-content">这里是第二段内容…</div>
</div>
</div>
用 JS 绑定点击事件并控制开关逻辑
获取所有 header 按钮，遍历绑定 click 事件。每次点击时：先关闭所有已展开的内容，再展开当前点击项的内容。关键点是区分“当前点击项”和“其他项”：
- 用 closest('.accordion-item') 找到当前按钮所属的面板项
- 用 querySelector('.accordion-content') 获取对应内容区域
- 用 classList.toggle('active') 切换状态类（方便配合 CSS 过渡）
- 为无障碍考虑，动态设置 aria-expanded 和 aria-hidden
CSS 配合实现平滑展开收起
仅靠 display: none/block 无法做过渡动画，推荐用 max-height + overflow: hidden，或更现代的 height: auto 配合 transition: height（需 JS 测量高度）。简单可靠的做法是：
- 默认 .accordion-content 设置 max-height: 0、overflow: hidden
- 添加 .active 类后设 max-height: 500px（值需大于最大内容高度）
- 加上 transition: max-height 0.3s ease-in-out
完整可运行示例（精简版）
把下面代码粘贴进 HTML 文件就能看到效果：
<script>
document.querySelectorAll('.accordion-header').forEach(button => {
button.addEventListener('click', () => {
const item = button.closest('.accordion-item');
const content = item.querySelector('.accordion-content');
// 关闭所有其他面板
document.querySelectorAll('.accordion-content').forEach(el => {
if (el !== content) {
el.style.maxHeight = '0';
el.setAttribute('aria-hidden', 'true');
}
});
// 切换当前面板
const isActive = content.getAttribute('aria-hidden') === 'false';
content.style.maxHeight = isActive ? '0' : content.scrollHeight + 'px';
content.setAttribute('aria-hidden', isActive ? 'true' : 'false');
});
});
</script>
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
