如何用jQuery实现动态内容区域与另一区域的同步高度展开

我完全get你的痛点——第一个区域内容是动态的，固定高度肯定行不通，而且slideDown是异步动画，直接拿高度只会得到动画过程中的中间值，导致两个区域节奏对不上。下面是一个完全适配你需求的解决方案，只用jQuery和CSS就能搞定：

核心思路 #

1. 提前锁定目标高度：触发展开动画前，临时显示隐藏内容来获取第一个区域展开后的真实高度，避开异步动画导致的高度获取误差。
2. 同步启动动画：让第一个区域的展开/收起动画和第二个区域的高度动画同时执行，保证视觉上完全同步。
3. 动态适配高度：始终以第一个区域的实际高度为基准，不管内容怎么变化，两个区域高度都能保持一致。

修改后的完整代码 #

HTML（保持你原有结构即可）

<div>
  <div class="columns row-8">
    <section id="summary" class="area">
      <main>
        <div id="details">
          <div>bla bla</div>
          <div>bla bla</div>
          <div>bla bla</div>
        </div>
        <div id="more-details" class="hide">
          <div>more bla bla</div>
          <div>more bla bla</div>
          <div>more bla bla</div>
        </div>
      </main>
      <footer>
        <button id="more-details-link">View more details</button>
      </footer>
    </section>
  </div>
  <div class="columns row-4">
    <section id="activity" class="area">
      <main>
        <ul>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
        </ul>
      </main>
      <footer>
        <a id="full-activity" href="#">See full activity</a>
      </footer>
    </section>
  </div>
</div>

CSS（补充必要样式，确保高度计算准确）

.hide {
  display: none;
}
/* 可选：给main区域加overflow:hidden，防止内容溢出破坏布局 */
.area > main {
  overflow: hidden;
}

JavaScript（关键修改部分）

$(function() {
  // 缓存常用DOM元素，提升性能
  const $summaryMain = $('#summary > main');
  const $activityMain = $('#activity > main');
  const $moreDetails = $('#more-details');
  // 获取第一个区域的初始高度
  const minHeight = $summaryMain.height();
  
  // 初始化第二个区域高度，和第一个区域保持一致
  $activityMain.height(minHeight);

  $('#more-details-link').on('click', function() {
    if ($moreDetails.is(':hidden')) {
      // 临时显示隐藏内容，计算展开后的完整高度（用户看不到这个操作）
      $moreDetails.show();
      const targetHeight = $summaryMain.height();
      $moreDetails.hide();

      // 同步执行展开动画，保持时长一致
      $moreDetails.slideDown(300);
      $activityMain.animate({ height: targetHeight }, 300);
    } else {
      // 收起时同步回到初始高度
      $moreDetails.slideUp(300);
      $activityMain.animate({ height: minHeight }, 300);
    }
  });
});

关键细节说明 #

• 提前计算高度：通过临时show()隐藏内容，我们能拿到#summary > main展开后的真实高度，再hide()回去，这个过程瞬间完成，用户完全感知不到。
• 同步动画节奏：确保slideDown/slideUp和animate的时长一致（这里用了300ms），让两个区域的动画进度完全匹配。
• 适配动态内容：如果你的#details内容是页面加载后通过AJAX生成的，只需要在内容加载完成后重新计算minHeight并更新$activityMain的高度即可。

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