如何在JS动态填充内容后调整jQuery抽屉组件尺寸？

我明白你的需求了——抽屉展开后，点击里面的链接加载新内容，要是新内容比原来的高，抽屉得自动撑开，不用关了再开对吧？这个问题其实很好解决，核心就是在内容加载完成后，重新计算并更新抽屉容器的高度限制。

问题根源 #

大部分抽屉组件是用 max-height + CSS 过渡来实现展开收起动画的：收起时设 max-height: 0，展开时给一个足够大的固定值（比如 1000px）。但动态加载新内容后，容器的实际内容高度变了，可原来的 max-height 还是固定值，所以容器不会自动适配新高度。

解决方案步骤 #

我们需要在新内容渲染完成后，手动更新抽屉容器的 max-height，让它匹配内容的实际高度。具体实现如下：

1. 基础HTML结构

<button class="drawer-toggle">展开/收起抽屉</button>
<div class="drawer-wrapper">
  <div class="drawer-content">
    <p>初始内容，点击下面的链接加载更多</p>
    <a href="#" class="load-new-content">加载长内容</a>
  </div>
</div>

2. CSS样式（带过渡动画）

.drawer-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border: 1px solid #eee;
  padding: 0 1rem;
  margin-top: 0.5rem;
}

/* 展开状态的初始max-height，给一个足够大的值 */
.drawer-wrapper.open {
  max-height: 1000px;
}

.drawer-content {
  padding: 1rem 0;
}

3. JavaScript逻辑（核心是动态调整高度）

const toggleBtn = document.querySelector('.drawer-toggle');
const drawerWrapper = document.querySelector('.drawer-wrapper');
const loadBtn = document.querySelector('.load-new-content');

// 抽屉展开/收起逻辑
toggleBtn.addEventListener('click', () => {
  drawerWrapper.classList.toggle('open');
  // 展开时立即适配当前内容高度
  if (drawerWrapper.classList.contains('open')) {
    adjustDrawerHeight();
  }
});

// 加载新内容逻辑（模拟异步请求）
loadBtn.addEventListener('click', (e) => {
  e.preventDefault();
  
  // 替换成你真实的AJAX请求逻辑
  setTimeout(() => {
    // 渲染新内容
    const longContent = `
      <p>这是刚加载的长内容：</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>更多内容...</p>
      <p>甚至还有更多内容...</p>
    `;
    document.querySelector('.drawer-content').innerHTML = longContent;
    
    // 内容渲染完成后，立即调整抽屉高度
    adjustDrawerHeight();
  }, 600);
});

// 核心函数：调整抽屉高度适配内容
function adjustDrawerHeight() {
  const contentHeight = document.querySelector('.drawer-content').offsetHeight;
  // 把容器的max-height设置为内容实际高度（可根据容器padding微调数值）
  drawerWrapper.style.maxHeight = `${contentHeight}px`;
  // 现代浏览器可直接用更简洁的方案：
  // drawerWrapper.style.maxHeight = 'fit-content';
}

关键说明 #

• 一定要在内容完全渲染到DOM后调用adjustDrawerHeight，比如AJAX的success回调里，或者模拟的setTimeout结束后，不然获取到的还是旧内容的高度。
• 如果不需要兼容非常旧的浏览器，用fit-content会更省心，不用手动计算高度，直接让容器自适应内容高度。
• 过渡动画依然保留，因为我们只是修改max-height的值，CSS过渡会自动处理平滑的高度变化。

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