可通过原生HTML的details/summary标签、CSS Checkbox Hack、JavaScript动态切换类名、CSS自定义属性配合transition，以及键盘可访问性增强五种方式实现手风琴折叠效果。
如果您希望在网页中实现点击标题展开或收拢对应内容的交互效果，即手风琴式折叠，可通过原生HTML、CSS与JavaScript协同完成。以下是实现此效果的多种方法：
一、使用HTML Details和Summary元素（纯HTML方案）
该方法无需任何JavaScript，利用浏览器原生支持的
1、在HTML中插入
2、将需要折叠的内容置于之前，内容默认隐藏，点击标题后展开。
立即学习“前端免费学习笔记（深入）”；
3、如需默认展开，为open属性。
4、可通过CSS选择器details[open]定制展开状态下的样式，例如添加边框或背景色。
二、基于CSS Checkbox Hack的手风琴（无JS纯CSS方案）
该方法利用复选框（）的:checked伪类与相邻兄弟选择器控制内容显隐，不依赖脚本，适合静态页面或对JS受限环境。
1、为每组手风琴项创建一个隐藏的，并赋予唯一ID。
2、紧随其后放置作为可点击标题，绑定至对应复选框。
3、再添加一个 4、在CSS中编写： 5、添加： 该方法通过监听标题点击事件，动态添加/移除CSS类来控制内容区域的显示与隐藏，灵活性高，支持多面板独立开关或单开互斥逻辑。 1、为每个标题元素添加 2、为每个内容容器设置初始样式 3、编写JavaScript，获取所有标题元素，遍历绑定click事件监听器。 4、在事件处理函数中，读取当前标题的 5、调用 为提升视觉体验，在JavaScript或Checkbox方案基础上，可借助CSS自定义属性驱动 1、在内容容器上设置 2、在CSS中声明： 3、通过JavaScript动态计算内容真实高度： 4、将该值赋给自定义属性： 5、当折叠时，再次将 确保手风琴组件符合WCAG标准，使屏幕阅读器用户及键盘操作者能正常交互，关键在于正确使用ARIA属性与焦点管理。 1、为标题元素添加 2、为内容容器添加 3、在JavaScript中，每次切换状态时同步更新 4、监听 5、展开后，将焦点自动移动至内容区域起始位置，使用input[type="checkbox"] + label + .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }。input[type="checkbox"]:checked + label + .accordion-content { max-height: 500px; }，其中500px应大于内容实际高度。三、JavaScript动态切换类名（通用可控方案）
data-target属性，值为对应内容容器的选择器（如#panel-1）。display: none;或max-height: 0;及overflow: hidden;。data-target值，用document.querySelector()获取目标内容节点。element.classList.toggle("active")切换激活类，并配合CSS中的.active规则控制显隐与过渡动画。四、使用CSS自定义属性与transition组合实现平滑动画
max-height过渡，避免固定像素值带来的布局僵化问题。style="--height: 0;"内联样式，并定义CSS变量--height。.accordion-content { max-height: var(--height); transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }。const height = content.scrollHeight + "px";。content.style.setProperty("--height", height);。--height设为"0"，触发回退动画。五、添加键盘可访问性支持（无障碍增强）
role="button"与aria-expanded="false"，初始状态设为false。role="region"与aria-labelledby，其值指向对应标题的ID。aria-expanded值为"true"或"false"。Enter和Space键事件，触发与鼠标点击相同的行为。content.focus({ preventScroll: true });并确保内容容器具有tabindex="-1"。
