本文详解如何使用 jQuery 为页面中多个 .slide-read-more 文本容器分别绑定独立的“展开/收起”逻辑，避免点击一个按钮导致所有容器同步响应，核心在于基于 DOM 遍历关系（如 next()）精准定位目标元素。
本文详解如何使用 jquery 为页面中多个 `.slide-read-more` 文本容器分别绑定独立的“展开/收起”逻辑，避免点击一个按钮导致所有容器同步响应，核心在于基于 dom 遍历关系（如 `next()`）精准定位目标元素。
在构建内容密集型网页（如博客摘要、产品描述列表或 FAQ 页面）时，为长文本添加“Read More / Read Less”交互是提升可读性与用户体验的关键实践。然而，初学者常犯的一个典型错误是：对所有匹配元素使用全局选择器（如 $(".slide-read-more")）统一操作，导致点击任一按钮时所有容器同时展开或收起——这显然违背了用户预期。
根本原因在于原始代码中，box 变量被定义为全局 jQuery 集合，事件处理器内未建立当前点击按钮与对应文本容器的绑定关系。正确解法是：为每个 .slide-read-more 元素单独初始化逻辑，并利用 DOM 结构关系（如相邻兄弟节点）精确关联其专属控制按钮。
以下为推荐的健壮实现方案（兼容 jQuery 3.x+）：
jQuery(function ($) {
// 遍历每个 .slide-read-more 容器，确保逻辑隔离
$(".slide-read-more").each(function () {
const $textBlock = $(this);
const minHeight = 200; // 折叠后的固定高度（px）
const initialHeight = $textBlock.innerHeight();
// 若内容超出最小高度，则初始折叠并显示 "Read More"
if (initialHeight > minHeight) {
$textBlock.css('height', minHeight);
const $readMoreBtn = $textBlock.next(".slide-read-more-button.read-more-button");
$readMoreBtn.show();
// 为该容器专属的按钮绑定事件
$readMoreBtn.on('click', function (e) {
e.preventDefault(); // 防止默认行为（如跳转）
const currentHeight = $textBlock.innerHeight();
// 临时设为 auto 获取完整高度
const fullHeight = $textBlock.css('height', 'auto').innerHeight();
// 恢复当前高度后执行动画（避免闪动）
$textBlock.css('height', currentHeight);
const targetHeight = (Math.round(currentHeight) === Math.round(fullHeight))
? minHeight
: fullHeight;
// 执行平滑高度动画
$textBlock.animate({ height: targetHeight }, 300, 'swing', function () {
// 动画完成后，若收起则重置为 auto（保持内容流式布局）
if (targetHeight === minHeight) {
$textBlock.css('height', '');
}
});
// 滚动至当前块顶部（可选增强体验）
$('html, body').animate({
scrollTop: $textBlock.offset().top - 20
}, 200);
// 切换按钮文字
const $btn = $(this);
$btn.text($btn.text() === 'Read More' ? 'Read Less' : 'Read More');
});
}
});
});
✅ 关键改进点说明：
-
作用域隔离：通过
.each()为每个文本块创建独立闭包，$textBlock始终指向当前处理的 DOM 元素； -
精准关联：使用
$textBlock.next(".slide-read-more-button.read-more-button")确保只操作紧邻其后的“Read More”按钮，不干扰其他容器； -
状态感知切换：通过比较
currentHeight与fullHeight的四舍五入值（规避浮点误差），准确判断当前状态（展开 or 收起）； -
DOM 清理优化：收起后将
height设为空字符串（''），使元素恢复由内容驱动的高度计算，避免 CSS 继承冲突； -
用户体验增强：添加
e.preventDefault()、滚动偏移（-20px）、动画缓动（'swing'）及合理时长（300ms）。
⚠️ 注意事项：
- HTML 结构必须严格保持：每个
<p class="slide-read-more"></p>后紧跟<div class="slide-read-more-button read-more-button">，否则 <code>next()查找会失败； - 如需支持纯 JavaScript（无 jQuery），可使用
Element.nextElementSibling替代next()，配合getComputedStyle()和scrollIntoView()实现等效逻辑； - 对于大量动态渲染的内容，建议将初始化逻辑封装为函数，在新元素插入后显式调用，而非仅依赖
$(document).ready()。
此方案简洁、可靠、可扩展，是生产环境中实现多实例“Read More”功能的首选实践。
