HTML内嵌script标签实现FAQ手风琴点击展开失效排查

问题根因 #

• 脚本执行时机不对：如果内嵌script标签写在HTML结构前面，浏览器执行JS时对应按钮DOM还没渲染完成，getElementById会返回null，后续绑定事件直接报错，所有交互失效
• 事件绑定不全：现有代码只给id为accordion-button-2的按钮绑定了点击事件，第一个手风琴项完全没有绑定交互
• 交互逻辑错误：第二个按钮初始aria-expanded属性值就是true，现有点击逻辑只会把属性设为true，没有做展开/收起的状态切换，点击后状态无变化
• 属性操作兼容性问题：直接修改DOM对象的ariaExpanded属性，在部分浏览器中不会同步更新DOM节点上的aria-expanded特性，CSS里的[aria-expanded="true"]选择器无法识别到状态变更，样式不会触发

修复方案 #

保留内嵌script实现方式，按以下两点调整即可：

1. 将script标签放到所有页面HTML内容的末尾（</body>标签之前），确保DOM渲染完成后再执行JS逻辑
2. 替换原有JS逻辑为全量按钮绑定+状态切换的代码，修复后的内嵌JS代码如下：

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有手风琴按钮
  const allAccordionBtns = document.querySelectorAll('.accordionItem button');
  allAccordionBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      // 切换当前按钮的展开状态
      const currentState = btn.getAttribute('aria-expanded') === 'true';
      btn.setAttribute('aria-expanded', !currentState);
      
      // 如需实现手风琴互斥效果（点开当前项自动收起其他项），保留以下代码，不需要可删除
      allAccordionBtns.forEach(otherBtn => {
        if (otherBtn !== btn) otherBtn.setAttribute('aria-expanded', 'false');
      })
    })
  })
})

注：如果已经把script标签放在HTML结构最底部，可以去掉外层的DOMContentLoaded事件监听，直接执行内部绑定逻辑。

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