UD5工具箱
手风琴组件（Accordion）
手风琴组件是一种常见的用户界面模式，由多个可折叠的面板项垂直堆叠组成。每个面板项包含一个可点击的标题区域和一个可展开/折叠的内容区域。当用户点击某个面板的标题时，该面板的内容会展开显示，而其他已展开的面板则会自动折叠收起（在单选模式下）。这种交互方式类似于乐器手风琴的风箱伸缩效果，因此得名。手风琴组件的核心价值在于它能够在有限的页面空间内高效组织和展示大量信息，让用户按需获取内容，避免信息过载。
折叠面板（Collapse）
折叠面板是手风琴组件的基础构建单元。在Bootstrap框架中，Collapse是一个独立的JavaScript插件，提供了基础的展开和折叠功能。折叠面板可以独立使用，也可以通过父容器关联组合成手风琴组件。折叠面板通常由触发元素（如按钮或链接）和目标内容区域两部分组成，通过data-bs-toggle和data-bs-target属性实现交互关联。
单选模式（Exclusive Mode）
单选模式是手风琴组件的一种展开行为配置。在此模式下，同一时间内只允许一个面板处于展开状态，当用户点击另一个面板的标题时，当前展开的面板会自动折叠，新点击的面板则会展开。单选模式通过在父容器上设置data-bs-parent属性来实现，该属性指定了所有互斥面板的共同父元素，确保它们之间的联动行为。单选模式特别适用于FAQ页面等需要聚焦阅读的场景。
多选模式（Multiple Open Mode）
多选模式是手风琴组件的另一种展开行为配置。在此模式下，多个面板可以同时处于展开状态，各面板的展开和折叠操作相互独立，互不影响。实现多选模式只需移除各面板折叠区域上的data-bs-parent属性即可。多选模式适用于需要同时查看多个内容板块的场景，比如产品功能列表、多步骤说明等。
CSS过渡动画（CSS Transition）
CSS过渡动画是指当元素的CSS属性值发生变化时，浏览器以平滑的渐变方式从旧值过渡到新值的过程。在手风琴组件中，过渡动画主要应用于内容区域的高度变化（从0到实际高度），使面板的展开和折叠过程更加流畅自然。过渡动画的持续时间（如0.2s、0.35s等）决定了动画的快慢节奏。CSS过渡通常使用transition属性定义，可以指定过渡的属性、持续时间和缓动函数。
语义化HTML（Semantic HTML）
语义化HTML是指使用具有明确含义的HTML标签来构建页面结构，而不是简单地使用无语义的div和span标签。手风琴组件的语义化结构通常包括article、section、h2/h3标题、button等标签，使得页面结构对浏览器、搜索引擎和辅助技术都具有清晰的意义。语义化HTML有助于提升页面的可访问性、SEO表现和代码可维护性。
无障碍支持（Accessibility）
无障碍支持是指确保网页内容和功能能够被所有用户（包括使用辅助技术的残障用户）平等地访问和使用。手风琴组件的无障碍支持包括：使用适当的ARIA属性（如aria-expanded、aria-controls）标记组件状态；确保键盘用户可以通过Tab键和Enter/Space键操作面板；为屏幕阅读器提供足够的语义信息。良好的无障碍设计不仅是道德责任，在许多地区也是法律要求。
响应式设计（Responsive Design）
响应式设计是一种网页设计方法，使页面能够根据不同的设备屏幕尺寸和分辨率自动调整布局和样式。在手风琴组件中，响应式设计意味着组件在桌面端和移动端都能提供良好的用户体验。具体来说，移动端的手风琴通常需要更大的触摸目标、更宽的面板间距以及更简洁的视觉呈现，以适应触摸操作的特点。