可折叠的内容面板，使用 max-height 或 CSS Grid 实现平滑的展开收起动画
点击面板标题展开或收起内容，体验两种不同的实现方式：
💡 提示：单开模式下，打开新面板会自动关闭其他面板；多开模式下可以同时展开多个面板
CSS Transform 是一个强大的 CSS 属性，允许你对元素进行 2D 或 3D 变换。
主要功能包括：
Transform 使用 GPU 加速，性能优于直接修改 top、left 等属性。
使用 Transform 有以下优势：
这使得 Transform 成为现代 Web 动画的首选方案。
Transform 在实际项目中有广泛应用：
使用 Transform 时的注意事项：
遵循这些原则可以创建高质量的用户体验。
使用 max-height 过渡是最常用的方法，兼容性好且效果自然,但是需要设置高度
<div class="accordion-item">
<div class="accordion-header">
<h3>标题</h3>
<span class="accordion-toggle">▼</span>
</div>
<div class="accordion-content">
<div class="accordion-body">
内容...
</div>
</div>
</div>.accordion-content {
/* 初始状态：高度为 0 */
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 展开状态：设置足够大的高度 */
.accordion-content.open {
max-height: 500px; /* 根据实际内容调整 */
}
/* 箭头旋转动画 */
.accordion-toggle {
transition: transform 0.3s ease;
}
.accordion-header.active .accordion-toggle {
transform: rotate(180deg);
}使用 CSS Grid 的 grid-template-rows 实现，动画流畅且不占据文档流空间：
.accordion-content {
/* 使用 Grid 布局控制高度 */
display: grid;
grid-template-rows: 0fr; /* 折叠状态 */
transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion-content.open {
grid-template-rows: 1fr; /* 展开状态 */
}
/* 内容需要设置 overflow: hidden */
.accordion-body {
overflow: hidden;
}实现单开和多开两种模式：
let multipleMode = false; // 单开/多开模式
const headers = document.querySelectorAll('.accordion-header');
headers.forEach(header => {
header.addEventListener('click', () => {
const item = header.parentElement;
const content = item.querySelector('.accordion-content');
const isOpen = content.classList.contains('open');
// 单开模式：关闭其他面板
if (!multipleMode && !isOpen) {
document.querySelectorAll('.accordion-content').forEach(c => {
c.classList.remove('open');
c.parentElement.querySelector('.accordion-header')
.classList.remove('active');
});
}
// 切换当前面板
content.classList.toggle('open');
header.classList.toggle('active');
});
});