CSS折叠面板生成器

CSS折叠面板生成器是一个可视化工具，帮助您快速创建和自定义现代化的CSS折叠面板（Accordion）组件。通过直观的参数调整，您可以实时预览折叠效果，并一键获取配套的CSS和HTML代码。

主要参数说明

• Items (项目数量)：设置折叠面板的条目数量，支持 2 到 5 个条目。
• Header Color (标题背景色)：设置折叠面板标题栏在默认（未展开）状态下的背景颜色。
• Active Color (激活态背景色)：设置折叠面板标题栏在激活（展开）状态下的背景颜色，用于高亮显示当前内容。
• Radius (圆角大小)：调整折叠面板每个条目的圆角半径，控制组件的圆润程度。

使用教程

1. 调整外观：在左侧控制面板中，拖动滑块或输入数值调整项目数量和圆角大小，使用颜色选择器设置标题和激活状态的颜色。
2. 实时预览：在右侧“Preview”标签页中即时查看折叠面板的视觉效果和交互动画。
3. 获取代码：点击“CSS”和“HTML”标签页查看生成的代码，使用“复制”按钮一键复制到剪贴板。
4. 集成应用：将HTML代码粘贴到网页结构中，将CSS代码添加到样式表中。注意：生成的CSS依赖 .active 类来控制展开状态，您需要添加简单的JavaScript代码来实现点击切换。

应用场景

• 常见问题解答 (FAQ)：收纳大量问答内容，保持页面整洁。
• 产品详情页：分块展示产品参数、规格和评论。
• 侧边导航菜单：创建多级折叠菜单，节省侧边栏空间。

交互逻辑示例 (JavaScript)

本工具生成的CSS通过类名控制显示。您可以使用以下简单的JavaScript代码实现点击切换交互：

// 示例：简单的原生JS实现
document.querySelectorAll('.jztheme-tools-css-accordion .accordion-header').forEach(header => {
    header.addEventListener('click', () => {
        const item = header.parentElement;
        // 切换当前项的激活状态
        item.classList.toggle('active');
        
        // (可选) 如果需要手风琴效果（每次只展开一项），可以关闭其他项：
        /*
        document.querySelectorAll('.jztheme-tools-css-accordion .accordion-item').forEach(el => {
            if (el !== item) el.classList.remove('active');
        });
        */
    });
});