如何实现点击read more仅展开当前滑块Box div，避免所有盒子同时展开

• 页面ID重复冲突：你第三个testSliderBox盒子里的省略号span和展开内容span仍然用了id="readdots1"、id="readmore1"，和第一个盒子的ID完全重复。HTML要求页面内ID必须全局唯一，document.getElementById匹配到第一个符合ID的元素就会返回，导致你点击第三个按钮调用myFunction3时，找不到不存在的readdots3、readmore3，甚至误操作到第一个盒子的对应元素，就会出现多个盒子同时展开收起的问题。
• 第三个盒子的ID没有按序号对应修改，和你JS函数myFunction3里要查找的ID不匹配。

快速修复现有代码 #

直接修改第三个testSliderBox里的对应元素ID即可：

<!-- 第三个盒子原来的错误代码 -->
<span id="readdots1">...</span><span id="readmore1">...</span>
<!-- 改成如下 -->
<span id="readdots3">...</span><span id="readmore3">...</span>

更优的通用实现（无需写多个重复函数） #

你现在写了3个逻辑完全一致的函数，后续如果新增盒子还要再写新函数，非常冗余，可以改成通用方案，不用依赖ID匹配：

1. 统一HTML结构，给所有read more按钮绑定点击事件时传入自身元素，用类名标记展开内容、省略号元素：

<style>
.readmore-content {display: none;}
</style>
<!-- 每个盒子内部结构统一调整，不需要ID -->
<p class="testiSliderPara">
  <i class="fa fa-quote-left" aria-hidden="true" style="color:#C8C2C2"></i> 
  预览文本
  <span class="readdots">...</span>
  <span class="readmore-content">展开的完整文本</span>
  <a class="float-right readmore-btn" onclick="toggleReadmore(this)" style="margin-bottom:10px;">Read more</a>
  <i class="fa fa-quote-right" aria-hidden="true" style="color:#C8C2C2"></i>
</p>

2. 只需要一个通用JS函数：

function toggleReadmore(btn) {
  // 从当前按钮往上找父级p元素，再查找同级的省略号和展开内容
  const parentPara = btn.closest('.testiSliderPara');
  const dots = parentPara.querySelector('.readdots');
  const moreText = parentPara.querySelector('.readmore-content');
  
  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btn.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btn.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}

这个方案后续新增任意数量的盒子，都不用修改JS代码，也不会出现ID冲突问题。

内容的提问来源于stack exchange，提问作者Sanjana Mathur