手风琴菜单是后台与官网的常客，但 90% 的实现依赖第三方库或 CSS Transition。今天原生 JS 手写一条「高度动画 + 状态机」的完整链路，打造丝滑手风琴效果。

JS 打造丝滑手风琴

效果预览

一、核心思路

高度动画：把 height: 0 ↔ 实际高度交给逐帧函数 createAnimation
状态机：用自定义属性 status=”closed|opened|playing” 避免并发点击
复用：任意html代码结构插上即用，零配置

二、代码速览

1.动画引擎（animate.js）

JS 打造丝滑手风琴

实现从一个初始值到目标值的平滑过渡效果，每帧更新一次视图。

函数参数（配置项）

from：动画起始值（如初始位置、初始透明度等）
to：动画目标值（最终要达到的数值）
totalMS：动画总时长（默认 300 毫秒，即 0.3 秒）
onmove：每帧更新时的回调函数（接收当前动画值，用于实时更新视图，列如 DOM 位置、样式等）
onend：动画结束时的回调函数（可选，动画完成后执行）

2.交互逻辑（index.js）

JS 打造丝滑手风琴

关键设计思路

用 status 属性（closed/opened/playing）管理子菜单状态，避免动画过程中重复触发点击事件
子菜单高度通过 “选项数量 × 单个高度” 动态计算，适配不同数量的子菜单
点击新菜单时自动关闭已打开的菜单，保证同一时间只有一个子菜单处于展开状态

3.样式骨架

<ul class="menu-container">
  <li class="menu">
    <h2>菜单1</h2>
    <ul class="submenu">
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
      <li>菜单4</li>
    </ul>
  </li>
  <li class="menu">
    <h2>菜单2</h2>
    <ul class="submenu">
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
      <li>菜单4</li>
    </ul>
  </li>
  <li class="menu">
    <h2>菜单3</h2>
    <ul class="submenu">
      <li>菜单1</li>
      <li>菜单2</li>
      <li>菜单3</li>
      <li>菜单4</li>
    </ul>
  </li>
</ul>