Bootstrap页面中如何修改jQuery实现的Read More按钮点击后的文字颜色

实现思路 #

通过CSS类控制按钮不同状态的样式，点击时仅操作当前触发事件的按钮，多个区块互不干扰，后续样式调整无需修改JS逻辑。 #

第一步：新增CSS样式 #

/* 收起状态（Read More）：蓝色，可自行调整色值匹配你的页面风格 */
.toggle-text-button.r-More {
  color: #0d6efd;
}
/* 展开状态（Read Less）：黑色 */
.toggle-text-button.r-Less {
  color: #000;
}

第二步：修改jQuery逻辑 #

修改后的完整代码如下，仅需要替换你原有的JS逻辑即可：

// 统一处理所有区块的展开收起事件
$(document).on("click", ".toggle-text-button", function() {
  // 缓存当前点击的按钮实例，避免重复DOM查询
  const $currentBtn = $(this);
  // 缓存对应操作的区块ID、回跳锚点ID
  const contentId = "#toggle-text-" + $currentBtn.attr("toggle-text");
  const backAnchorId = "#toggle-text-" + $currentBtn.attr("toggle-text") + "b";

  if ($currentBtn.text().trim() === "Read More") {
    // 展开内容：修改按钮文字+切换样式类为黑色
    $currentBtn.text("Read Less").removeClass("r-More").addClass("r-Less");
    $(contentId).slideDown();
  } else {
    // 收起内容：修改按钮文字+切回蓝色样式类
    $currentBtn.text("Read More").removeClass("r-Less").addClass("r-More");
    $(contentId).slideUp();
    // 保留你原有需要的滚动回锚点逻辑
    $("html, body").delay(1000).animate({
      scrollTop: $(backAnchorId).offset().top - 150
    }, 1000);
  }
});

优化说明 #

• 删除了你原有代码中无效的document.getElementById('toggle-text-button')逻辑：多个按钮不能共用同一个ID，直接用$(this)就能精准获取当前点击的按钮，不会影响其他区块的按钮状态
• 用CSS类切换样式比直接写行内!important优先级更可控，后续要调整颜色只需要修改CSS即可，不需要动JS代码
• 提前缓存了常用的选择器，减少重复DOM查询，运行性能更好

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