手风琴动画（grid 折叠平滑展开动效）

效果演示（真实可交互）

点击任意标题，对应面板以平滑的高度过渡展开，右侧箭头旋转 180 度，内容淡入；再点其他标题，当前面板收起、新的面板展开，同一时间只保留一项展开。展开动画完全跟随内容实际高度，无论文字多长都不会出现「空跑」或跳变，收起时同样顺滑。

完整代码

HTML（标题按钮 + 双层内容容器）：

<div class="acc-item open">
  <button class="acc-head" aria-expanded="true">标题文字</button>
  <div class="acc-body">
    <div class="acc-inner">内容文字，高度任意</div>
  </div>
</div>

CSS（grid 折叠动画的核心三行）：

.acc-body {
  display: grid;
  grid-template-rows: 0fr;                /* 收起：行高为 0 */
  transition: grid-template-rows .4s ease;
}
.acc-item.open .acc-body { grid-template-rows: 1fr; }  /* 展开：撑满内容 */
.acc-inner { overflow: hidden; }          /* 防止内容溢出 */

JS（独占式展开，约 12 行）：

const items = document.querySelectorAll('.acc-item');
items.forEach((item) => {
  item.querySelector('.acc-head').addEventListener('click', () => {
    const willOpen = !item.classList.contains('open');
    items.forEach((it) => {
      it.classList.remove('open');
      it.querySelector('.acc-head').setAttribute('aria-expanded', 'false');
    });
    if (willOpen) {
      item.classList.add('open');
      item.querySelector('.acc-head').setAttribute('aria-expanded', 'true');
    }
  });
});

为什么用 grid 而不是 max-height：传统方案需要猜一个足够大的 max-height 上限，内容少时动画会「空跑」，内容多时又被截断；而 grid-template-rows 的 0fr 到 1fr 过渡由浏览器直接按内容真实高度插值，时长恒定、精确贴合，是近年来最优雅的纯 CSS 折叠方案。内层 .acc-inner 负责裁切溢出，JS 只做「独占展开」与 aria 状态同步。

参数说明

兼容性与性能

• grid-template-rows 过渡需要 Chrome 107+ / Firefox 66+ / Safari 16+，属较新的 CSS 能力；旧浏览器会直接展开/收起（无动画），功能不受影响
• 只过渡 grid-template-rows 一个属性，内容裁切由 overflow: hidden 承担，无重排风暴
• 标题使用原生 button，Tab 聚焦、回车与空格触发开箱即用；aria-expanded 随状态同步，屏幕阅读器播报准确
• 内容区域可自由放入图片、表格、表单等复杂结构，动画依旧平滑

常见问题

Q: 展开时内容一闪而过没有动画？ 检查浏览器版本是否支持 grid-template-rows 过渡（Chrome 107+）。也可以确认 .acc-inner 是否设置了 overflow: hidden，没有它内容会在动画期间溢出。

Q: 想支持同时展开多个面板？ 把 JS 里「先全部收起」的循环去掉，只切换当前项的状态即可；此时每个面板的动画互不干扰，grid 方案天然支持多开。

Q: transitionend 回调触发多次？ transition-property 默认监听所有过渡属性。若同时过渡了多个属性，在回调里过滤 e.propertyName 为 grid-template-rows 的再处理，可避免重复执行。

Q: 能商用吗？ 可以。本组件为粤喵自研原创实现，免费商用无需署名。