本文详解手风琴组件点击失效的根本原因——javascript 在 dom 元素加载前执行，并提供正确初始化方案、可访问性优化及 css 动画增强技巧。
本文详解手风琴组件点击失效的根本原因——javascript 在 dom 元素加载前执行，并提供正确初始化方案、可访问性优化及 css 动画增强技巧。
手风琴（Accordion）组件点击后无展开效果，是前端开发中常见却易被忽视的问题。根本原因在于：脚本在 HTML 元素尚未被浏览器解析完成时即执行，导致 document.querySelectorAll(".accordion button") 返回空 NodeList，事件监听器无法绑定到任何按钮上。
✅ 正确的脚本加载位置
最直接有效的修复方式，是将 <script> 标签移至 </body> 闭合标签之前（即 DOM 底部），确保所有 HTML 元素已就绪：
<!-- ... 页面其他 HTML 结构 -->
<div class="accordion">
<div class="accordion-item">
<button aria-expanded="false">
<span class="accordion-title">When are you guys open?</span>
<span class="icon" aria-hidden="true"></span>
</button>
<div class="accordion-content">
<p>We are open every day of the week from 10am to 8pm.</p>
</div>
</div>
<!-- 更多 accordion-item ... -->
</div>
<!-- ✅ 脚本置于 body 底部，确保 DOM 已加载 -->
<script type="text/javascript">
const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
// 关闭所有其他项
items.forEach(item => item.setAttribute('aria-expanded', 'false'));
// 展开当前项（仅当它原本关闭时）
if (this.getAttribute('aria-expanded') === 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
</script>? 注意：原代码中存在多个重复的 id="accordion-button-1"，违反 HTML ID 唯一性规范，虽不影响功能，但建议改为语义化唯一 ID（如 id="faq-open-hours"）或直接移除 ID（若非必需）。
? 进阶优化：支持 DOMContentLoaded 安全初始化
若需保留脚本在 <head> 中（例如为统一资源管理），应显式等待 DOM 加载完成：
<head>
<!-- 其他 head 内容 -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const items = document.querySelectorAll(".accordion button");
const toggleAccordion = function() {
items.forEach(el => el.setAttribute('aria-expanded', 'false'));
if (this.getAttribute('aria-expanded') === 'false') {
this.setAttribute('aria-expanded', 'true');
}
};
items.forEach(item => item.addEventListener('click', toggleAccordion));
});
</script>
</head>? CSS 动画与可访问性协同要点
你的 CSS 已良好支持 aria-expanded 状态切换，但需确认以下关键点生效：
- .accordion-content 必须设 overflow: hidden + max-height: 0（收缩态）和 max-height: [足够值]（展开态），配合 transition 实现平滑动画；
- will-change: opacity, max-height 可提升动画性能；
- 图标旋转逻辑依赖 ::before/::after 伪元素控制，当前 CSS 中 .icon::after 在 aria-expanded="true" 时设为 width: 0，实现了“加号→减号”的视觉转换，符合无障碍设计惯例。
✅ 最终验证：点击任意标题按钮，对应 .accordion-content 应平滑展开，同时其他项自动收起，且屏幕阅读器能准确播报“expanded/collapsed”状态。
通过将脚本置于 DOM 尾部或使用 DOMContentLoaded 监听器，即可彻底解决手风琴无响应问题——这不仅是技术修复，更是践行渐进增强与可访问性优先开发理念的重要一步。
