如何为多个同名类容器实现独立的“展开/收起”交互功能-html教程-PHP中文网

本文介绍如何使用 jQuery 为页面中多个具有相同 class 的容器（如 .summary 和 .description-read-more）实现彼此隔离的“Read More / Read Less”交互，避免点击一个按钮影响所有容器。核心在于利用 $(this) 动态定位当前操作元素及其关联 DOM 节点。

本文介绍如何使用 jquery 为页面中多个具有相同 class 的容器（如 `.summary` 和 `.description-read-more`）实现彼此隔离的“read more / read less”交互，避免点击一个按钮影响所有容器。核心在于利用 `$(this)` 动态定位当前操作元素及其关联 dom 节点。

在实际开发中，我们常需复用结构相同的组件（例如商品摘要卡片），每个卡片都包含一段可折叠文本和一个触发按钮。若直接对全局选择器（如 $('.summary')）进行统一操作，会导致所有卡片同步展开或收起——这显然违背用户预期。

解决的关键在于：事件处理函数内部必须基于 $(this) 进行局部作用域查找，而非依赖初始化时缓存的全局 jQuery 对象。原代码中 productDescription 和 autoHeight 等变量在 DOM 准备就绪时即被一次性计算，无法响应不同容器的个体差异；而修正后的逻辑将这些计算移入 click 回调内，并通过 $(this).prev() 精准定位当前按钮所对应的 .summary 元素。

以下是优化后的完整实现：

jQuery(document).ready(function($) {
  $('.description-read-more').click(function() {
    // ✅ 动态获取当前按钮关联的 summary 容器（假设其紧邻前一个兄弟元素）
    var $summary = $(this).prev('.summary');

    // ✅ 动态计算当前容器的高度参数
    var currentHeight = $summary.height();
    var autoHeight = $summary.css('height', 'auto').height();
    $summary.css('height', currentHeight); // 恢复初始高度，避免样式残留

    var $textMore = $(this).find('.text_more');
    var showMoreText = 'Read More';
    var showLessText = 'Read Less';

    if ($(this).hasClass('active')) {
      // 收起：恢复初始高度
      $(this).removeClass('active');
      $summary.removeClass('active');
      $summary.animate({ height: currentHeight }, 200);
      $textMore.text(showMoreText);
    } else {
      // 展开：动画至自动高度
      $(this).addClass('active');
      $summary.addClass('active');
      $summary.animate({ height: autoHeight }, 200);
      $textMore.text(showLessText);
    }
  });
});

? HTML 结构要求（关键！）
为确保 $(this).prev('.summary') 准确匹配，请保持每组 .summary 与 .description-read-more 相邻且顺序固定：

<div class="summary">
  <p><strong>Description:</strong></p>
  <p>Initial content...</p>
  <p>Additional details that are initially hidden.</p>
</div>
<div class="description-read-more"><span class="text_more">Read More</span></div>

<!-- 第二组（可重复任意次数） -->
<div class="summary">
  <p><strong>Description:</strong></p>
  <p>Another product's summary...</p>
</div>
<div class="description-read-more"><span class="text_more">Read More</span></div>

⚠️ 注意事项：

若 .summary 与按钮之间存在其他元素，应改用更鲁棒的查找方式，例如：$(this).closest('.card').find('.summary')（需配合合理父容器结构）；
高度动画建议添加 overflow: hidden 到 .summary 以防止内容溢出；
为提升可访问性，建议为按钮添加 aria-expanded 属性并动态切换；
现代项目推荐使用原生 JavaScript 或 CSS max-height 过渡替代 jQuery 动画，但本方案兼容性高、逻辑清晰，适合快速迭代场景。

通过将作用域控制从“全局静态绑定”转为“事件驱动的局部查找”，即可轻松实现多实例组件的独立交互行为——这是前端开发中处理重复 DOM 结构的通用范式。