JavaScript/CSS 实现手风琴/折叠效果
JavaScript 和 CSS 实现手风琴/折叠效果
手风琴（Accordion）是一种常见的 UI 组件，允许用户点击标题以展开或收起内容区域，适合展示 FAQ、菜单或分层信息。以下是一个使用纯 JavaScript 和 CSS 实现的简洁手风琴效果，易于集成和自定义。
实现思路
- HTML 结构：使用
<div>作为手风琴容器，每个手风琴项包含标题（<h3>）和内容（<div>）。 - CSS 样式：
- 标题：添加点击样式（如 hover 效果）和展开指示器（如箭头）。
- 内容：默认隐藏（
display: none），展开时显示（display: block）。 - 动画：使用 CSS
transition实现平滑展开/收起效果。
- JavaScript 逻辑：
- 为每个标题添加
click事件监听。 - 点击时切换内容区域的显示状态（通过
classList.toggle）。 - 可选：实现“单一展开”（点击一个标题时，其他展开的内容收起）。
- 扩展性：支持动画、自定义样式、ARIA 无障碍属性。
完整代码示例
以下是完整的 HTML、CSS 和 JavaScript 代码。你可以复制到一个 .html 文件中，在浏览器中直接运行测试。
手风琴/折叠效果