jQuery手风琴实现：原生JS中maxHeight、scrollHeight的转换方法

原有代码核心错误点梳理 #

• 无效的jQuery样式设置写法：nextitem.css.height = 1 这类代码完全不生效，jQuery的.css()是方法，必须传入键值对参数才能修改样式，正确写法为$(element).css('属性名', '属性值')
• scrollHeight 读取逻辑错误：jQuery实例对象不直接暴露原生DOM的scrollHeight属性，需要先从jQuery对象中取出原生DOM节点再读取对应属性
• 硬编码版本逻辑颠倒：原代码中if (!this.classList.contains("Active"))的判断，会把无激活状态时的maxHeight设为固定值，和预期的展开/收起逻辑完全相反——正常逻辑应该是元素带Active类时设置展开高度，无该类时设为0收起

无需硬编码的正确实现代码 #

$(document).ready(function() {
  $(".accordeon-item-header").click(function() {
    // 切换当前头部的激活状态类
    $(this).toggleClass("Active");
    // 获取相邻的手风琴主体元素，和原生nextElementSibling逻辑对应
    const $accordionBody = $(this).next();
    // 取出原生DOM节点，读取内容实际总高度
    const realContentHeight = $accordionBody[0].scrollHeight;

    if ($(this).hasClass("Active")) {
      // 激活状态：maxHeight设为内容实际高度，触发展开过渡
      $accordionBody.css("max-height", `${realContentHeight}px`);
    } else {
      // 非激活状态：maxHeight设为0，触发收起过渡
      $accordionBody.css("max-height", 0);
    }
  });

  // 可选：监听窗口尺寸变化，自动适配展开状态下的内容响应式高度
  $(window).on('resize', function() {
    $(".accordeon-item-header.Active").each(function() {
      const $body = $(this).next();
      $body.css("max-height", `${$body[0].scrollHeight}px`);
    });
  });
});

注意：这里不能用jQuery提供的.height()/.innerHeight()/.outerHeight()方法读取高度——当元素处于收起状态（max-height: 0、overflow: hidden）时，这类方法会返回被裁剪后的高度0，只有原生的scrollHeight能读到元素内容的真实总高度，不受样式裁剪的影响。

和原生JS逻辑的对应关系 #

• 原生nextElementSibling → jQuery .next() 方法，匹配下一个相邻兄弟元素
• 原生element.scrollHeight → 从jQuery实例取出原生节点后的jQuery对象[0].scrollHeight读取
• 原生element.style.maxHeight = 值 → jQuery .css('max-height', 值) 设置
• 原生element.classList.contains('Active') → jQuery .hasClass('Active') 类名判断，兼容性更强

配套CSS无需调整 #

现有CSS完全适配上述实现，无需修改：

.accordeon-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

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