JavaScript实现的手风琴组件中切换按钮失效问题排查

你的手风琴切换按钮失效的核心原因是事件绑定时机不对：
你在DOMContentLoaded回调外提前执行了document.querySelectorAll('.question')，此时动态生成的FAQ元素还未插入DOM，questions是空集合，导致点击事件根本没绑定到按钮上。

修复方案一：延迟事件绑定到内容生成后 #

把事件绑定代码移到DOMContentLoaded回调内，确保在FAQ元素渲染完成后再获取并绑定事件：

const faq = [
  {
    ques: 'this is test question',
    answer: 'this is test answer ',
  },
  {
    ques: 'this is test question',
    answer: 'this is test answer ',
  },
]

const sectionCenter = document.querySelector('.section-center');

window.addEventListener('DOMContentLoaded', () => {
  displayQuestions(faq);
  // 内容生成后再获取元素并绑定事件
  const questions = document.querySelectorAll('.question');
  questions.forEach((question) => {
    const btn = question.querySelector('.question-btn');
    btn.addEventListener('click', () => {
      questions.forEach((curQuestion) => {
        if (curQuestion !== question) {
          curQuestion.classList.remove('show-text');
        }
      });
      question.classList.toggle('show-text');
    });
  });
});

function displayQuestions(items) {
  let display = items.map(({ ques, answer }) => {
    return ` 
            <article class="question">
                <div class="question-title">
                    <p>${ques}</p>
                    <button type="button" class="question-btn">
                        <span class="plus-icon">
                            <i class="far fa-plus-square"></i>
                        </span>

                        <span class="minus-icon">
                            <i class="far fa-minus-square"></i>
                        </span>
                    </button>
                </div> 
                
                 <div class="question-text">
                    <p>${answer}</p>
                </div>
            </article>
          `;
  });
  display = display.join('');
  sectionCenter.innerHTML = display;
}

修复方案二：使用事件委托（更推荐） #

不需要每次生成内容都重新绑定事件，直接把点击事件绑定到已存在的父元素.section-center上，利用事件冒泡处理动态元素的点击：

const faq = [
  {
    ques: 'this is test question',
    answer: 'this is test answer ',
  },
  {
    ques: 'this is test question',
    answer: 'this is test answer ',
  },
]

const sectionCenter = document.querySelector('.section-center');

window.addEventListener('DOMContentLoaded', () => {
  displayQuestions(faq);
});

// 事件委托绑定到父元素
sectionCenter.addEventListener('click', (e) => {
  // 判断点击目标是否为按钮或按钮内部元素
  const btn = e.target.closest('.question-btn');
  if (!btn) return;
  
  const question = btn.closest('.question');
  // 关闭其他展开的问题
  document.querySelectorAll('.question').forEach(curQuestion => {
    if (curQuestion !== question) {
      curQuestion.classList.remove('show-text');
    }
  });
  // 切换当前问题的展开状态
  question.classList.toggle('show-text');
});

function displayQuestions(items) {
  let display = items.map(({ ques, answer }) => {
    return ` 
            <article class="question">
                <div class="question-title">
                    <p>${ques}</p>
                    <button type="button" class="question-btn">
                        <span class="plus-icon">
                            <i class="far fa-plus-square"></i>
                        </span>

                        <span class="minus-icon">
                            <i class="far fa-minus-square"></i>
                        </span>
                    </button>
                </div> 
                
                 <div class="question-text">
                    <p>${answer}</p>
                </div>
            </article>
          `;
  });
  display = display.join('');
  sectionCenter.innerHTML = display;
}

补充说明 #

• 方案二优势：如果后续FAQ数据更新（比如异步加载新问题），无需重新绑定事件，父元素的监听会自动处理新生成的按钮。
• 需确保页面引入Font Awesome图标库，否则fa-plus-square和fa-minus-square图标无法正常显示。

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