内容设置

面板数量

模式

主题色

边框圆角

8px

间距

4px

编辑面板内容

实时预览

生成代码

...

💡 说明

1. 调整面板数量和样式参数
2. 编辑每个面板的标题和内容（支持HTML）
3. 实时预览 Accordion 效果
4. 选择查看 HTML / CSS / 完整代码，一键复制

❓ 常见问题

单开和多开模式有什么区别？

单开模式（Accordion）一次只能展开一个面板，展开新面板时自动关闭其他面板。多开模式（Collapsible）允许同时展开多个面板，每个面板独立开关。单开模式适合 FAQ 列表，多开模式适合分组内容展示。

生成的代码包含 JavaScript 吗？

生成的是纯 HTML+CSS 实现，使用 CSS :target 伪类或 checkbox hack 实现手风琴效果。无需 JavaScript，兼容性好。你也可以根据需要自行添加 JS 增强交互。

如何接入现有项目？

复制 HTML 和 CSS 代码到你的项目中即可。CSS 以 .accordion-xx 前缀命名，避免样式冲突。支持自定义主题色、圆角、间距等参数。

`; if(currentTab === 'html') codeOutput.textContent = htmlOutput; else if(currentTab === 'css') codeOutput.textContent = cssOutput; else codeOutput.textContent = fullHtml; } itemCount.addEventListener('input',syncItems); mode.addEventListener('change',()=>{renderPreview();renderCode();}); accentColor.addEventListener('input',()=>{renderPreview();renderCode();}); borderRadius.addEventListener('input',()=>{borderRadiusVal.textContent=borderRadius.value+'px';renderPreview();renderCode();}); gap.addEventListener('input',()=>{gapVal.textContent=gap.value+'px';renderPreview();renderCode();}); document.querySelectorAll('.tab-btn').forEach(el=>{ el.addEventListener('click',function(){ document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active')); this.classList.add('active'); currentTab = this.dataset.tab; renderCode(); }); }); copyBtn.addEventListener('click',function(){ navigator.clipboard.writeText(codeOutput.textContent).then(()=>showToast('已复制到剪贴板 ✓')).catch(()=>{ const r=document.createRange();r.selectNode(codeOutput);window.getSelection().removeAllRanges();window.getSelection().addRange(r);document.execCommand('copy');showToast('已复制到剪贴板 ✓'); }); }); resetBtn.addEventListener('click',function(){ items = [ {title:'什么是 Accordion 组件？',content:'Accordion（手风琴/折叠面板）是一种常见的 UI 组件，由多个可折叠的面板组成。',open:true}, {title:'如何使用？',content:'复制生成的 HTML 和 CSS 到你的项目中即可使用。',open:false}, {title:'有哪些自定义选项？',content:'你可以调整面板数量、主题色、边框圆角、面板间距等样式参数。',open:false}, ]; itemCount.value = 3; itemCountVal.textContent = '3'; mode.value = 'single'; accentColor.value = '#06b6d4'; borderRadius.value = 8; borderRadiusVal.textContent = '8px'; gap.value = 4; gapVal.textContent = '4px'; render(); showToast('已重置 ✓'); }); function showToast(msg){ const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),2000); } syncItems();

📂 HTML Accordion 生成器