HTML+JS实现的READ MORE/READ LESS功能单页多段复用失效如何解决

问题原因 #

• 你使用了全局唯一的id属性标记dots/more/myBtn元素，document.getElementById()只会匹配页面中第一个出现的对应id元素，复用功能时第二个段落的对应元素无法被正确识别，因此功能失效。

修复方案 #

1. 新增基础样式 #

首先补充CSS确保默认状态下折叠内容隐藏：

.more {
  display: none;
}
.dots {
  display: inline;
}

2. 修改JS逻辑 #

移除固定id依赖，通过点击按钮定位当前操作的段落组，按组匹配对应元素：

function myFunction(btn) {
  const group = btn.closest('.read-more-group');
  const dots = group.querySelector('.dots');
  const moreText = group.querySelector('.more');

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btn.textContent = "READ MORE";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btn.textContent = "READ LESS";
    moreText.style.display = "inline";
  }
}

3. 调整HTML结构 #

每个需要折叠的段落套入read-more-group容器，将原id替换为类名，点击事件传入当前按钮参数：

<!-- 可无限复用的段落结构 -->
<div class="read-more-group">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span class="dots">...</span><span class="more"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span></p>
  <div class="col-md-12">
      <button onclick="myFunction(this)" class="rm">READ MORE</button>
  </div>
</div>

<div class="read-more-group">
  <p>第二个段落示例内容前置部分<span class="dots">...</span><span class="more">第二个段落展开后的隐藏内容</span></p>
  <div class="col-md-12">
      <button onclick="myFunction(this)" class="rm">READ MORE</button>
  </div>
</div>

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