本文讲解如何使用 jQuery 为页面中多个具有相同 class 的容器分别绑定独立的「Read More / Read Less」交互逻辑，避免点击一个按钮影响所有容器，核心在于利用 $(this) 精准定位当前操作元素及其关联 DOM。
本文讲解如何使用 jquery 为页面中多个具有相同 class 的容器分别绑定独立的「read more / read less」交互逻辑，避免点击一个按钮影响所有容器，核心在于利用 `$(this)` 精准定位当前操作元素及其关联 dom。
在实际开发中，当页面存在多个结构相同、类名一致的模块（如商品摘要、文章简介等），若直接通过全局选择器（如 $('.summary') 或 $('.description-read-more')）批量初始化状态和事件，会导致所有模块共享同一组高度变量与行为逻辑——点击任一「Read More」按钮，所有 .summary 元素都会同时展开或收起，违背用户预期。
解决的关键在于：将事件处理逻辑从“全局作用域”下沉到“单个触发元素上下文”。具体做法是，在 .click() 回调中，不再依赖预先定义的全局 jQuery 对象（如 productDescription），而是动态通过 $(this) 获取当前被点击的 .description-read-more 元素，并利用 DOM 关系（如 .prev()）精准找到其紧邻的 .summary 容器。同时，所有高度计算（currentHeight、autoHeight）也需针对该特定容器实时执行。
以下是优化后的完整实现代码：
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 结构需保证每个 .description-read-more 紧邻其对应的 .summary（推荐使用语义化包裹，如 <article>），例如：
<article>
<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>
</article>
<article>
<div class="summary">
<p><strong>Description:</strong></p>
<p>Another product summary...</p>
<p>This one also supports independent toggle.</p>
</div>
<div class="description-read-more"><span class="text_more">Read More</span></div>
</article>⚠️ 注意事项：
- 若 .summary 与 .description-read-more 不是相邻兄弟元素（如中间有其他标签），请改用更健壮的查找方式，例如 $(this).closest('article').find('.summary')；
- 高度动画依赖 overflow: hidden，请确保 .summary 的 CSS 包含 overflow: hidden，否则内容可能溢出；
- 初始高度应设为可见行数对应的高度（如 line-height × 2），或使用 clamp() + max-lines（现代 CSS 方案）作为渐进增强补充；
- 如需支持无 JS 场景，建议添加 <noscript> 提示或服务端渲染默认展开状态。
通过这种基于事件源（$(this)）的局部化处理，每个容器都能拥有完全独立的状态与动画行为，真正实现「所点即所得」的用户体验。
