纯JS如何选中点击按钮所属父级内指定ID，解决多折叠块重复ID冲突

核心问题修复思路 #

HTML规范要求ID全局唯一，重复ID会导致document.getElementById永远只会返回第一个匹配的元素，这是功能异常的根本原因。我们只需要将重复ID替换为Class，再从点击的按钮出发局部查找元素即可解决，以下是完整纯JS实现方案：

1. 修改HTML代码

将所有重复的dots、more、myBtn的ID属性替换为Class：

<div class="wrapper">
  <div id="card1" class="card">
    <h2>Read More Read Less </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
    <button onclick="myFunction(this)" class="myBtn">Read more</button>
  </div>
  <div id="card2" class="card">
    <h2>Read More Read Less 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
    <button onclick="myFunction(this)" class="myBtn">Read more</button>
  </div>
</div>

2. 修改CSS代码

将ID选择器替换为Class选择器，新增隐藏卡片的样式：

.more {
  display: none;
}
.card.hidden {
  display: none;
}

3. 修改JS代码

改为局部查找元素，同时实现点击当前卡片隐藏另一个卡片的逻辑：

function myFunction(btn) {
  // 定位当前点击按钮所属的card容器
  const currentCard = btn.closest('.card');
  // 在当前card内查找对应的元素
  const dots = currentCard.querySelector('.dots');
  const moreText = currentCard.querySelector('.more');
  // 获取所有card
  const allCards = document.querySelectorAll('.wrapper .card');

  if (dots.style.display === "none") {
    // 收起状态：显示所有card
    allCards.forEach(card => card.classList.remove('hidden'));
    dots.style.display = "inline";
    btn.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    // 展开状态：隐藏其他所有card
    allCards.forEach(card => {
      if (card !== currentCard) card.classList.add('hidden');
    });
    dots.style.display = "none";
    btn.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

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