UD5工具箱
快速上手指南
本教程将带您完整体验 FAQ 手风琴生成器的全部功能。从添加第一个问答条目到导出最终的 HTML 代码，整个过程无需编写任何代码，完全通过可视化界面操作完成。
第一步：了解界面布局
打开工具后，您会看到一个清晰的三栏布局。左侧是配置面板，包含手风琴模式、视觉样式、图标风格等下拉选项，以及展开行为的开关按钮。中间是FAQ 条目编辑区，用于添加和管理具体的问答内容。右侧上方是实时预览区，展示手风琴组件的实际渲染效果；右侧下方是代码输出区，显示生成的完整 HTML 代码。顶部工具栏提供重置、展开全部、折叠全部三个快捷操作按钮。
第二步：添加 FAQ 条目
在中间的条目编辑区，点击"添加 FAQ 条目"按钮创建一个新的问答对。在弹出的输入区域中，上方的输入框填写问题文本，下方的输入框填写对应的答案内容。答案字段支持较长的文本，您可以输入多段文字来详细回答问题。添加完成后，条目会出现在列表中，右侧预览区会即时显示新的手风琴项。重复此步骤添加所有需要的问答条目。如果需要调整条目的顺序或删除某个条目，可以使用条目旁的相应操作按钮。
第三步：配置手风琴选项
根据您的设计需求调整左侧的配置选项。首先选择手风琴模式：如果希望用户一次只查看一个答案，选择"单选"；如果希望允许多个答案同时展开，选择"多选"。然后选择视觉样式：默认边框模式适合信息密集型页面，无边框（Flush）模式适合极简设计。接着选择图标风格：Chevron 箭头更简洁，Plus/Minus 更直观。最后根据需要开启或关闭"首项默认展开"和"始终展开一项"两个开关。每修改一个选项，右侧预览区都会即时更新，方便您对比不同配置的效果。
第四步：预览和调整
在右侧预览区中，您可以直接与手风琴组件交互，点击各个问题标题测试展开和折叠效果。使用顶部的"展开全部"和"折叠全部"按钮快速查看所有内容的显示效果。检查每个问答项的文字是否完整显示、图标是否正确、动画是否流畅。如果发现需要修改的内容，直接在左侧编辑区进行调整，预览区会实时同步更新。建议在不同屏幕宽度下检查预览效果，确保在移动设备上也能正常显示。
第五步：使用快速模板（可选）
如果您希望快速了解工具的效果，可以点击"快速模板"区域的模板按钮。"产品 FAQ"模板会填充一组典型的产品相关问答，"服务 FAQ"模板填充服务类问答，"技术 FAQ"模板填充技术类问答。模板内容会自动填入条目编辑区，您可以在其基础上自由修改和增删。模板是加速创建的起点，而非最终内容，所有文字都可以根据您的实际需求进行定制。
第六步：复制生成的代码
当您对预览效果满意后，查看右侧代码输出区生成的 HTML 代码。代码区域会显示代码行数统计。点击代码区上方的"复制"按钮，整段代码将被复制到系统剪贴板。然后将代码粘贴到您项目中的目标位置即可。如果您使用 WordPress，在文章或页面编辑器中添加"自定义HTML"区块，将代码粘贴进去。如果使用其他 CMS 或纯 HTML 项目，将代码粘贴到对应的容器元素中。确保您的页面已经引入了 Bootstrap 5.3 的 CSS 和 JS 文件，手风琴组件才能正常工作。
第七步：重新开始（如需）
如果您对当前配置不满意或希望创建全新版本的手风琴，点击顶部工具栏的"重置"按钮。此操作将清空所有已添加的 FAQ 条目并将所有配置选项恢复为默认值。预览区将显示空状态提示，代码输出区将清空。您可以从第一步开始重新创建。请注意，重置操作不可撤销，建议在重置前复制已生成的代码以备需要。