相同class元素触发隐藏区块异常求助：点击单按钮打开所有隐藏块

问题出在点击按钮时，JS代码选中了所有同class的隐藏元素，导致全部展开。核心要做的是找到当前点击按钮对应的那个特定隐藏区块，下面是两种现成的代码方案：

方案一：利用兄弟元素关联（适合结构固定的场景） #

HTML #

<div class="item-group">
  <button class="toggle-btn">展开区块1</button>
  <div class="hidden-content">这是区块1的专属内容</div>
</div>

<div class="item-group">
  <button class="toggle-btn">展开区块2</button>
  <div class="hidden-content">这是区块2的专属内容</div>
</div>

<div class="item-group">
  <button class="toggle-btn">展开区块3</button>
  <div class="hidden-content">这是区块3的专属内容</div>
</div>

CSS #

.hidden-content {
  display: none;
  margin-top: 8px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.hidden-content.show {
  display: block;
}

JavaScript #

const allBtns = document.querySelectorAll('.toggle-btn');

allBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 只操作当前按钮的下一个兄弟元素（对应隐藏区块）
    const targetContent = this.nextElementSibling;
    targetContent.classList.toggle('show');
    // 可选：切换按钮文字
    this.textContent = targetContent.classList.contains('show') ? '收起区块' : '展开区块';
  });
});

方案二：用data属性绑定ID（适合结构灵活的场景） #

如果按钮和隐藏区块不是直接相邻的兄弟元素，用data-target绑定目标区块的ID更稳妥：

HTML #

<button class="toggle-btn" data-target="content1">展开区块1</button>
<div id="content1" class="hidden-content">这是区块1的专属内容</div>

<div class="some-other-wrapper">
  <button class="toggle-btn" data-target="content2">展开区块2</button>
</div>
<div id="content2" class="hidden-content">这是区块2的专属内容</div>

JavaScript #

const allBtns = document.querySelectorAll('.toggle-btn');

allBtns.forEach(btn => {
  btn.addEventListener('click', function() {
    // 从按钮的data-target属性拿到目标区块ID
    const targetId = this.dataset.target;
    const targetContent = document.getElementById(targetId);
    targetContent.classList.toggle('show');
    this.textContent = targetContent.classList.contains('show') ? '收起区块' : '展开区块';
  });
});

关键提醒：别用document.querySelectorAll('.hidden-content')去操作所有区块，一定要通过当前点击的按钮（this）定位到唯一对应的那个目标元素，这样就不会出现点一个按钮全展开的问题了。

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