无需登录 数据私有 本地保存

手风琴组件生成器 - 折叠面板HTML/CSS代码

13
0
0
0
手风琴配置
面板内容管理
外观样式设置
自定义：
交互行为设置
实时预览
常见问题与知识点
什么是手风琴（Accordion）组件？
手风琴组件是一种UI模式，由多个可折叠面板垂直堆叠组成。用户点击某个面板标题时，该面板展开显示内容，其他面板则折叠收起。这种设计能有效节省页面空间，让用户在有限区域内浏览大量信息。Bootstrap 5.3 提供了内置的 Accordion 组件，基于 Collapse 插件实现。
如何让手风琴支持多面板同时展开？
在 Bootstrap 5.3 中，只需移除各面板 .accordion-collapse 元素上的 data-bs-parent 属性，即可允许多个面板同时展开。data-bs-parent 属性用于指定父容器，实现单选互斥效果；去掉后各面板独立运作，互不影响。
Bootstrap手风琴组件的基本结构是什么？
基本结构包括：外层 .accordion 容器 → .accordion-item 面板项 → .accordion-header 标题区（含 .accordion-button 按钮）→ .accordion-collapse.collapse 折叠区 → .accordion-body 内容体。按钮通过 data-bs-toggle="collapse" 和 data-bs-target 关联折叠区。
如何自定义手风琴的展开/折叠图标？
Bootstrap 默认使用 .accordion-button::after 伪元素绘制SVG箭头图标。通过覆盖该伪元素的 background-image 属性，可以替换为自定义图标（如加号/减号、Font Awesome图标等）。也可设置 background-image: none 完全隐藏图标。本工具支持多种图标样式一键切换。
手风琴组件在移动端的适配注意事项？
移动端适配要点：①确保折叠按钮的触摸目标不小于 44×44px；②文字内容避免过长导致横向溢出，可使用 word-break 处理；③动画过渡保持流畅，避免卡顿；④面板间距适当增大，减少误触；⑤标题文字简洁明了，方便快速扫读。
如何让手风琴始终有一个面板保持展开？
需要借助JavaScript实现。监听 hide.bs.collapse 事件，当检测到即将关闭的面板是当前唯一展开的面板时，调用 e.preventDefault() 阻止关闭。本工具在"始终展开一项"模式下会自动在生成代码中包含此逻辑。
Bootstrap Accordion和Collapse有什么区别？
Collapse 是 Bootstrap 的核心折叠插件，提供基础的展开/折叠功能。Accordion 是基于 Collapse 构建的高级组件，通过 data-bs-parent 属性将多个 Collapse 关联起来，实现互斥的单选行为，并提供了完整的语义化HTML结构和无障碍支持。
🔧 相关工具