
本文详解手风琴组件点击无响应的根本原因——javascript 在 dom 元素加载前执行,并提供完整的修复方案,包括 dom 加载时机控制、语义化 aria 属性处理及 css 动画优化。
本文详解手风琴组件点击无响应的根本原因——javascript 在 dom 元素加载前执行,并提供完整的修复方案,包括 dom 加载时机控制、语义化 aria 属性处理及 css 动画优化。
手风琴(Accordion)组件是常见交互式 FAQ 页面的核心功能,但开发者常遇到“点击按钮无反应”的问题。根本原因并非逻辑错误,而是 JavaScript 执行时机不当:原始代码将 <script> 放在 <head> 中,此时 HTML 尚未解析,document.querySelectorAll(".accordion button") 返回空 NodeList,导致事件监听器完全未绑定。</script>
✅ 正确的解决方案:确保 DOM 就绪后再执行脚本
最直接可靠的修复方式是将 <script> 标签移至 </script>











