折叠面板通过点击标题展开或收起内容，示例包含HTML、CSS和JavaScript实现，支持多面板独立操作，适用于FAQ等场景，代码可直接运行并扩展。
网页折叠面板（Accordion）是一种常见的UI组件，适用于展示分组内容，节省页面空间。下面是一个简单的HTML在线折叠面板实现示例，包含基础的HTML、CSS和JavaScript代码，可直接在浏览器中运行或用于在线UI组件开发参考。
1. 折叠面板功能说明
该折叠面板支持点击标题展开或收起对应的内容区域，多个面板项可独立操作。适用于FAQ、设置菜单、产品详情等场景。
2. 完整代码示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>折叠面板示例</title>
<style>
.accordion {
max-width: 600px;
margin: 20px auto;
font-family: Arial, sans-serif;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.accordion-item {
background: #fff;
border-bottom: 1px solid #ddd;
}
.accordion-header {
padding: 16px 20px;
background-color: #f7f7f7;
cursor: pointer;
font-weight: bold;
font-size: 16px;
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-header::after {
content: '+';
font-size: 18px;
color: #555;
}
.accordion-header.active::after {
content: '−';
}
.accordion-content {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
background: #fdfdfd;
}
.accordion-content-inner {
padding: 16px 20px;
line-height: 1.6;
}
.accordion-item.active .accordion-content {
max-height: 300px;
padding: 16px 20px;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header">什么是HTML？</div>
<div class="accordion-content">
<div class="accordion-content-inner">
HTML（超文本标记语言）是构建网页的基础语言，用于定义页面结构。
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">CSS的作用是什么？</div>
<div class="accordion-content">
<div class="accordion-content-inner">
CSS用于控制网页的样式和布局，如颜色、字体、间距等。
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">JavaScript能做什么？</div>
<div class="accordion-content">
<div class="accordion-content-inner">
JavaScript为网页添加交互功能，比如响应点击、动态更新内容等。
</div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.accordion-header').forEach(header => {
header.addEventListener('click', function() {
const item = this.parentElement;
const isActive = item.classList.contains('active');
// 关闭所有面板
document.querySelectorAll('.accordion-item').forEach(el => {
el.classList.remove('active');
});
// 展开当前项（如果之前未展开）
if (!isActive) {
item.classList.add('active');
}
});
});
</script>
</body>
</html>
3. 使用说明与扩展建议
此折叠面板使用原生JavaScript实现，不依赖任何框架，适合嵌入各类项目中。
- 修改
.accordion-item可增加更多面板项 - 调整
max-height适应更长内容 - 支持移动端点击操作，响应式设计良好
- 可封装为Web Component用于UI组件库开发
