如何用jQuery实现点击一个链接展开多个区块？

嘿，我来帮你搞定这个点击「更多/收起」同步展开两个区块的问题！你现在遇到的情况是点击单个按钮只能展开对应区块，这大概率是因为当前代码只给每个按钮绑定了单独操作自身对应区块的逻辑，咱们调整一下就能实现同步效果～

第一步：统一HTML结构（给元素加批量操作的类名） #

先确保两个区块有相同的类名，这样jQuery可以一次性选中所有目标元素，避免重复代码：

<!-- 第一个展开区块 -->
<div class="expandbox-top">
  <button class="toggle-btn">更多</button>
  <div class="expand-content" style="height: 280px; overflow: hidden;">
    <!-- 第一个区块的内容 -->
    区块1的测试内容...<br>
    隐藏的更多内容...<br>
    隐藏的更多内容...<br>
  </div>
</div>

<!-- 第二个展开区块 -->
<div class="expandbox-top">
  <button class="toggle-btn">更多</button>
  <div class="expand-content" style="height: 280px; overflow: hidden;">
    <!-- 第二个区块的内容 -->
    区块2的测试内容...<br>
    隐藏的更多内容...<br>
    隐藏的更多内容...<br>
  </div>
</div>

第二步：添加CSS过渡效果（优化用户体验） #

给内容区加上平滑的过渡动画，让展开/收起的过程更自然，同时定义展开后的状态：

.expand-content {
  transition: height 0.3s ease-in-out; /* 0.3秒的平滑过渡 */
}

/* 展开时让高度自动适配内容 */
.expand-content.expanded {
  height: auto !important;
}

第三步：jQuery核心逻辑（实现同步切换） #

关键是点击任意按钮时，同时操作所有内容区和按钮，而不是只操作当前按钮对应的那个：

$(document).ready(function() {
  // 给所有「更多/收起」按钮绑定点击事件
  $('.toggle-btn').on('click', function() {
    // 1. 同步切换所有内容区的展开状态
    $('.expand-content').toggleClass('expanded');
    
    // 2. 同步切换所有按钮的文字
    $('.toggle-btn').text(function(index, currentText) {
      return currentText === '更多' ? '收起' : '更多';
    });
  });
});

为什么这样能解决问题？ #

之前的代码可能是用$(this).siblings('.expand-content')这类选择器，只操作当前按钮旁边的单个内容区。现在改成用类名选中所有内容区和按钮，不管点击哪个按钮，都会触发所有元素的状态切换，自然就实现了两个区块同步展开/收起的效果～

如果你原来的HTML里有ID属性，完全可以保留，用类名批量操作只是让代码更简洁，不用给每个区块写重复的逻辑。

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