多容器场景下实现独立触发的「阅读更多/收起」功能的解决方案咨询

嗨，我完全懂你的困扰——当页面上有多个相同结构的内容容器时，原本的「阅读更多/收起」逻辑会因为操作了全局的元素选择器，导致点击一个按钮就触发所有容器的状态变化。咱们来把这个问题搞定，让每个按钮只控制自己对应的容器：

问题根源分析 #

你原来的代码里，把所有.summary和.description-read-more都存在了全局变量里，点击事件触发时直接操作了所有.summary元素，这就是为什么所有容器都会一起变化的原因。核心解决思路是：基于当前点击的按钮，精准找到它对应的那个内容容器，只操作这个容器的状态。

改进后的代码实现 #

首先是jQuery部分，我们调整逻辑，让每个按钮只处理自己对应的容器：

jQuery(document).ready(function($) {
  // 给每个「阅读更多」按钮绑定点击事件
  $('.description-read-more').click(function() {
    // 获取当前点击的按钮实例
    const $currentBtn = $(this);
    // 根据你的HTML结构，找到对应的内容容器（这里用prev()是因为按钮在容器的下一个位置，可根据实际结构调整）
    const $currentDesc = $currentBtn.prev('.summary');
    
    const showMoreText = 'Read More';
    const showLessText = 'Read Less';

    // 计算当前容器的初始高度和完全展开后的高度
    const initialHeight = $currentDesc.height();
    const fullHeight = $currentDesc.css('height', 'auto').height();
    // 先把高度重置回初始状态，避免视觉跳动
    $currentDesc.css('height', initialHeight);

    if ($currentBtn.hasClass('active')) {
      // 执行收起逻辑
      $currentBtn.removeClass('active');
      $currentDesc.removeClass('active');
      $currentDesc.animate({ height: initialHeight }, 0);
      $currentBtn.find('.text_more').text(showMoreText);
    } else {
      // 执行展开逻辑
      $currentBtn.addClass('active');
      $currentDesc.addClass('active');
      $currentDesc.animate({ height: fullHeight }, 0);
      $currentBtn.find('.text_more').text(showLessText);
    }
  });
});

然后推荐你把每个内容容器和对应的按钮放在一个父容器里，这样结构更清晰，后续维护也方便（当然如果你的现有结构没法改，只用上面的逻辑也能生效）：

<!-- 第一个内容组 -->
<div class="content-group">
  <div class="summary">
    <p><strong>Description:</strong></p>
    <p>initial content</p>
    <p>more content that will be hidden initially</p>
    <p>extra content only shown when expanded</p>
  </div>
  <div class="description-read-more"><span class="text_more">Read More</span></div>
</div>

<!-- 第二个内容组 -->
<div class="content-group">
  <div class="summary">
    <p><strong>Description:</strong></p>
    <p>another initial content</p>
    <p>another hidden content block</p>
  </div>
  <div class="description-read-more"><span class="text_more">Read More</span></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

最后别忘了加上基础CSS，让初始状态下超出的内容被隐藏：

.summary {
  height: 50px; /* 自定义你想要的初始高度 */
  overflow: hidden;
  /* 如果需要平滑过渡动画，把animate的时长改成300，再加上下面这行 */
  /* transition: height 0.3s ease; */
}

关键改进点 #

1. 不再使用全局的元素选择器，而是通过$currentBtn.prev('.summary')精准定位当前按钮对应的内容容器（如果你的DOM结构不同，可以换成.closest('.content-group').find('.summary')这类写法）
2. 把高度计算逻辑移到点击事件内部，确保每个容器用的是自己的高度值（毕竟不同容器的内容长度可能不一样）
3. 所有状态修改都只针对当前的按钮和容器，不会影响页面上的其他同类元素

这样修改后，点击每个「阅读更多」按钮就只会控制自己对应的内容容器展开或收起啦～

备注：内容来源于stack exchange，提问作者sc2015