如何为多个“阅读更多”按钮实现独立展开/收起功能-js教程-PHP中文网

如何为多个“阅读更多”按钮实现独立展开/收起功能

本文讲解如何修复因重复使用 id 导致的“仅第一个按钮生效”问题，通过改用 class 选择器与事件委托，使每个按钮仅控制其所在容器内的对应文本元素。

本文讲解如何修复因重复使用 id 导致的“仅第一个按钮生效”问题，通过改用 class 选择器与事件委托，使每个按钮仅控制其所在容器内的对应文本元素。

在前端开发中，id 属性必须在页面中唯一。原代码中多次使用 id="dots"、id="more" 和 id="myBtn"，导致 document.getElementById() 始终只返回第一个匹配元素，因此所有按钮都只能操作第一个区块的内容——这正是“仅第一个生效”的根本原因。

正确的做法是：用 class 替代 id，并通过事件目标（event.currentTarget）向上查找其所属容器，再在该局部作用域内精准定位子元素。以下是完整、可复用的解决方案：

✅ 步骤一：更新 HTML 结构（移除重复 ID，改用语义化 class）

<div class="quote__box__text">
  lorem ipsum <span class="dots">...</span>
  <span class="more">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
  <button class="myBtn">Przeczytaj więcej</button>
</div>

<div class="quote__box__text">
  lorem ipsum <span class="dots">...</span>
  <span class="more">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  <button class="myBtn">Przeczytaj więcej</button>
</div>

⚠️ 注意：.more 元素默认应隐藏，推荐通过 CSS 控制而非内联样式，确保初始状态统一且可维护：

Zeemo AI
Zeemo AI是一款用于自动生成、编辑和翻译视频字幕的 AI 视频字幕工具。

下载
.more {
display: none;
}

✅ 步骤二：使用 querySelectorAll + 事件监听器批量绑定

document.addEventListener('DOMContentLoaded', () => {
  const buttons = document.querySelectorAll('.myBtn');

  buttons.forEach(button => {
    button.addEventListener('click', function (e) {
      // 获取当前按钮所在的 .quote__box__text 容器
      const container = e.currentTarget.closest('.quote__box__text');
      if (!container) return;

      // 在该容器内查找对应元素（作用域隔离，互不干扰）
      const dots = container.querySelector('.dots');
      const more = container.querySelector('.more');

      // 切换显示状态与按钮文案
      if (dots.style.display === 'none') {
        dots.style.display = 'inline';
        more.style.display = 'none';
        e.currentTarget.textContent = 'Przeczytaj więcej';
      } else {
        dots.style.display = 'none';
        more.style.display = 'inline';
        e.currentTarget.textContent = 'Zwiń';
      }
    });
  });
});