如何用JavaScript实现折叠面板（Accordion）
折叠面板是网页中常见的交互组件，通常用于展示多个可折叠的内容区块，用户点击标题时可以展开或收起对应的内容区域，能够节省页面空间，提升信息展示的效率。下面我们将从基础原理出发，一步步实现一个原生JavaScript版本的折叠面板，不依赖任何第三方库。
折叠面板的基本结构
首先我们需要搭建折叠面板的HTML结构，每个面板项由标题和内容两部分组成，整体用一个容器包裹。注意这里提到的<div>、<button>等标签都需要按照规范转义或者在代码块中正确展示。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS折叠面板</title>
<style>
/* 基础样式 */
.accordion {
width: 600px;
margin: 20px auto;
border: 1px solid #e0e0e0;
border-radius: 4px;
}
.accordion-item {
border-bottom: 1px solid #e0e0e0;
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-header {
width: 100%;
padding: 15px 20px;
text-align: left;
background-color: #f5f5f5;
border: none;
cursor: pointer;
font-size: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-header:hover {
background-color: #e8e8e8;
}
.accordion-header .arrow {
transition: transform 0.3s ease;
}
.accordion-header.active .arrow {
transform: rotate(180deg);
}
.accordion-content {
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
background-color: #fff;
}
.accordion-content.show {
padding: 15px 20px;
}
</style>
</head>
<body>
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<button class="accordion-header">
第一个面板标题
<span class="arrow">▼</span>
</button>
<div class="accordion-content">
<p>这是第一个面板的内容，这里可以放任意文本、图片或者其他HTML元素。</p>
<p>折叠面板的内容区域默认是隐藏的，点击标题才会展开。</p>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
第二个面板标题
<span class="arrow">▼</span>
</button>
<div class="accordion-content">
<p>这是第二个面板的内容，支持多行文本展示。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
</div>
<div class="accordion-item">
<button class="accordion-header">
第三个面板标题
<span class="arrow">▼</span>
</button>
<div class="accordion-content">
<p>这是第三个面板的内容，折叠动画通过CSS的transition属性实现。</p>
</div>
</div>
</div>
<script>
// JavaScript逻辑会在下面补充
</script>
</body>
</html>上面的代码已经完成了折叠面板的样式和静态结构，其中CSS部分实现了面板的边框、背景色、展开收起的过渡动画，箭头图标也会在展开时旋转180度，提升交互体验。接下来我们编写JavaScript逻辑，实现点击标题切换内容显示/隐藏的功能。
实现折叠交互逻辑
核心逻辑是监听所有面板标题的点击事件，点击时先判断当前面板是否已经展开，如果已经展开就收起，否则先收起所有已展开的面板，再展开当前点击的面板。这里我们可以通过操作CSS类来控制内容的显示状态，同时动态计算内容区域的高度来实现平滑的展开收起效果。
// 获取所有面板标题元素
const accordionHeaders = document.querySelectorAll('.accordion-header');
// 获取所有面板内容元素
const accordionContents = document.querySelectorAll('.accordion-content');
// 遍历所有标题，绑定点击事件
accordionHeaders.forEach((header, index) => {
header.addEventListener('click', () => {
// 获取当前点击标题对应的内容区域
const currentContent = accordionContents[index];
// 获取当前标题是否已经是展开状态
const isActive = header.classList.contains('active');
// 第一步：先收起所有已展开的面板
accordionHeaders.forEach((h, i) => {
// 移除标题的激活状态
h.classList.remove('active');
// 收起对应的内容区域
accordionContents[i].classList.remove('show');
// 将内容区域的最大高度设为0，触发收起动画
accordionContents[i].style.maxHeight = '0';
});
// 第二步：如果当前点击的面板之前是收起状态，就展开它
if (!isActive) {
// 给当前标题添加激活状态，箭头会旋转
header.classList.add('active');
// 给当前内容区域添加显示类，添加内边距
currentContent.classList.add('show');
// 动态设置内容区域的最大高度为内容实际高度，触发展开动画
// scrollHeight是元素内容的总高度，包括溢出的部分
currentContent.style.maxHeight = currentContent.scrollHeight + 'px';
}
});
});这段代码的逻辑非常清晰：首先选中所有的面板标题和内容元素，然后为每个标题绑定点击事件。点击时，先遍历所有面板，把它们的展开状态全部重置，避免同时展开多个面板。接着判断当前点击的面板是否已经是展开状态，如果不是，就给它添加展开相关的样式，并且动态设置内容区域的最大高度为内容的实际高度，这样CSS的transition属性就会自动触发平滑的展开动画。
优化与扩展
上面的基础版本已经能实现折叠面板的核心功能，我们还可以做一些小优化，比如支持同时展开多个面板，或者默认展开某一个面板。
支持同时展开多个面板
如果不需要限制只能展开一个面板，只需要修改点击逻辑，去掉“先收起所有面板”的步骤，改为只切换当前点击面板的状态即可：
const accordionHeaders = document.querySelectorAll('.accordion-header');
const accordionContents = document.querySelectorAll('.accordion-content');
accordionHeaders.forEach((header, index) => {
header.addEventListener('click', () => {
const currentContent = accordionContents[index];
const isActive = header.classList.contains('active');
if (isActive) {
// 当前是展开状态，收起
header.classList.remove('active');
currentContent.classList.remove('show');
currentContent.style.maxHeight = '0';
} else {
// 当前是收起状态，展开
header.classList.add('active');
currentContent.classList.add('show');
currentContent.style.maxHeight = currentContent.scrollHeight + 'px';
}
});
});默认展开指定面板
如果需要页面加载时默认展开某一个面板，只需要在HTML中给对应的标题添加active类，给对应的内容区域添加show类，并且设置内容区域的max-height为实际高度即可：
<!-- 默认展开第一个面板 -->
<div class="accordion-item">
<button class="accordion-header active">
第一个面板标题
<span class="arrow">▼</span>
</button>
<div class="accordion-content show" style="max-height: 200px;">
<p>这是第一个面板的内容，这里可以放任意文本、图片或者其他HTML元素。</p>
<p>折叠面板的内容区域默认是隐藏的，点击标题才会展开。</p>
</div>
</div>如果内容是动态加载的，也可以在JavaScript初始化的时候计算内容的实际高度，动态设置max-height的值，避免手动设置固定高度的问题。
总结
原生JavaScript实现折叠面板的核心思路是通过监听点击事件，切换对应元素的CSS类状态，再结合CSS的transition属性实现平滑的动画效果。相比使用第三方组件库，原生实现的方式更轻量，也能让我们更清楚地理解交互逻辑的实现原理，适合在简单项目或者需要自定义交互的场景中使用。如果需要更复杂的功能，比如嵌套面板、Ajax加载内容等，也可以在这个基础版本上进一步扩展。