如何使用原生JavaScript为手风琴菜单添加滑动效果

要实现平滑的展开/收起动画，核心是利用CSS的transition过渡属性配合max-height控制内容区域的高度变化，替代瞬间切换的show()/hide()。以下是完整的原生JS实现方案：

步骤1：微调HTML结构 #

保留原有布局，给箭头容器添加明确选择器方便JS定位：

<div class="accordian-wrapper">
  <div class="accordian-hover d-flex flex-row justify-content-center align-items-center container">
    <div id="accordian-question-div">
      <h5>How to use this product ?</h5>
    </div>
    <div class="arrow-container">
      <i class="fa fa-solid fa-arrow-down"></i>
    </div>
  </div>
  <div class="accordian-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt iste est sunt? Excepturi quas, sunt recusandae laboriosam eligendi cum autem. Tempora nulla, at sequi minima praesentium, explicabo ullam eius odio corporis optio autem pariatur consequuntur, rem voluptate soluta exercitationem natus quod repudiandae. Reprehenderit vitae, iste facere aspernatur minima modi repellat!</p>
  </div>
</div>

步骤2：添加CSS过渡样式 #

通过max-height和transition实现平滑动画，初始状态隐藏内容：

.accordian-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-in-out;
  /* 可根据需求调整过渡时长和缓动函数 */
}

.accordian-content.active {
  max-height: 200px; /* 设置一个大于内容实际高度的值，避免内容被截断 */
}

步骤3：原生JavaScript逻辑实现 #

移除jQuery依赖，用原生API完成点击交互、状态切换：

const accordianTrigger = document.querySelector('.accordian-hover');
const accordianContent = document.querySelector('.accordian-content');
const arrowIcon = document.querySelector('.arrow-container i');

accordianTrigger.addEventListener('click', () => {
  const isActive = accordianContent.classList.contains('active');
  
  // 切换内容区域显示状态
  if (isActive) {
    accordianContent.classList.remove('active');
    arrowIcon.classList.replace('fa-arrow-up', 'fa-arrow-down');
  } else {
    accordianContent.classList.add('active');
    arrowIcon.classList.replace('fa-arrow-down', 'fa-arrow-up');
    // 可选优化：动态获取内容实际高度，避免固定max-height的限制
    // accordianContent.style.maxHeight = accordianContent.scrollHeight + 'px';
  }
});

关键细节说明 #

• 选用max-height而非height：因为内容高度可能不固定，max-height可自适应内容，同时配合过渡实现平滑滑动效果。
• 动态高度优化：如果内容高度不确定，可在激活时用scrollHeight获取实际高度并赋值给maxHeight，避免固定值导致的内容截断或多余空白。
• 过渡参数调整：0.3s的时长和ease-in-out的缓动函数可根据产品风格自行修改，让动画节奏更贴合需求。

内容的提问来源于stack exchange，提问作者Gopichand