FAQ功能修复：实现点击按钮单独展开对应隐藏内容

你的问题核心是点击按钮时错误操作了所有.openContent元素，解决的关键是让按钮只对自身对应的内容区块执行展开/收起操作，以下是两种实用的修复方案：

方案一：通过DOM结构关联（适合固定布局） #

如果你的FAQ项是按钮和内容成对的结构（比如同属一个父容器），可以利用DOM层级关系定位对应内容：

示例HTML结构 #

<div class="faq-item">
  <button class="openBtn">问题1</button>
  <div class="openContent hidden">答案1</div>
</div>
<div class="faq-item">
  <button class="openBtn">问题2</button>
  <div class="openContent hidden">答案2</div>
</div>

修复后的JS代码 #

const buttons = document.querySelectorAll('.openBtn');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 定位当前按钮的兄弟内容元素
    const targetContent = this.nextElementSibling;
    // 仅切换当前内容的类名
    targetContent.classList.toggle('hidden');
    targetContent.classList.toggle('flex');
  });
});

方案二：通过自定义属性绑定（适合灵活布局） #

如果DOM结构不固定，可通过data-*自定义属性将按钮与对应内容绑定：

示例HTML结构 #

<button class="openBtn" data-target="faq-content-1">问题1</button>
<div class="openContent hidden" id="faq-content-1">答案1</div>

<button class="openBtn" data-target="faq-content-2">问题2</button>
<div class="openContent hidden" id="faq-content-2">答案2</div>

修复后的JS代码 #

const buttons = document.querySelectorAll('.openBtn');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 获取按钮绑定的目标内容ID
    const targetId = this.dataset.target;
    // 定位对应内容元素
    const targetContent = document.getElementById(targetId);
    // 仅切换当前内容的类名
    targetContent.classList.toggle('hidden');
    targetContent.classList.toggle('flex');
  });
});

关键注意事项 #

• 彻底移除原代码中遍历所有.openContent元素的逻辑，只操作当前按钮对应的目标元素
• 确保每个内容区块都有唯一的关联标识（要么是固定DOM关系，要么是唯一ID）

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