如何使用手风琴制作滑块？

手风琴（Accordion）是一种常见的用户界面组件，它允许用户通过点击或触摸来展开和折叠内容区域。滑块（Slider）则是一种允许用户在一定范围内选择值的控件。结合这两者，可以创建一个具有交互性的滑块组件，用户可以通过展开和折叠来查看或调整滑块的不同部分。

基础概念

手风琴组件：一种可折叠的面板组，每次只展开一个面板。
滑块组件：一种允许用户在一定范围内滑动选择数值的控件。

类型

单选手风琴：一次只能展开一个面板。
多选手风琴：可以同时展开多个面板。

应用场景

设置页面：用户可以在不同的设置选项之间切换。
产品详情页：展示产品的不同特性或规格。
导航菜单：提供层次化的导航选项。

实现示例

以下是一个使用HTML、CSS和JavaScript实现简单手风琴滑块的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="accordion-slider">
        <div class="accordion-item">
            <button class="accordion-header">Section 1</button>
            <div class="accordion-content">
                <input type="range" min="0" max="100" value="50" class="slider">
            </div>
        </div>
        <div class="accordion-item">
            <button class="accordion-header">Section 2</button>
            <div class="accordion-content">
                <input type="range" min="0" max="100" value="30" class="slider">
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.accordion-slider {
    width: 300px;
}

.accordion-item {
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.accordion-header {
    width: 100%;
    padding: 10px;
    text-align: left;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.slider {
    width: 100%;
}

JavaScript (script.js)

document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
        const content = header.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + 'px';
        }
    });
});