本文详解如何在页面加载时，根据 URL 中的哈希值（如 #faq-0）自动展开对应 FAQ 答案项，并同步更新 ARIA 状态与过渡动画，确保可访问性与用户体验一致。
本文详解如何在页面加载时，根据 url 中的哈希值（如 `#faq-0`）自动展开对应 faq 答案项，并同步更新 aria 状态与过渡动画，确保可访问性与用户体验一致。
在构建可访问、语义化的 FAQ 组件时，常采用“问题-答案”配对的
但若用户直接通过带锚点的链接（例如 https://example.com/services/faq#faq-2）进入页面，仅靠 $(hash).show() 无法满足需求：它仅修改 display，却遗漏了 transition 动画、data-slide-toggle 状态及关键的 ARIA 属性同步（如将对应问题项的 aria-expanded 改为 "true"）。这会导致行为不一致、动画失效、可访问性降级，甚至与现有交互逻辑冲突。
✅ 正确做法是：在 DOM 加载完成后，解析 window.location.hash，精准还原用户手动点击后的完整状态。以下为推荐实现（兼容 Drupal Behaviors 环境）：
(function ($, Drupal) {
'use strict';
Drupal.behaviors.faqAutoExpand = {
attach: function (context, settings) {
// 确保仅在初始页面加载时执行（避免重复触发）
if (context === document) {
const hash = window.location.hash;
// 验证哈希是否匹配 FAQ 答案 ID（如 #faq-0, #faq-1...）
if (hash && /^#faq-\d+$/.test(hash)) {
const $answer = $(hash);
const $question = $(`[aria-controls="${hash.slice(1)}"]`);
if ($answer.length && $question.length) {
// 1. 设置答案样式与数据属性
$answer
.css({
'display': 'block',
'transition': 'all 300ms ease-in'
})
.data('slide-toggle', true);
// 2. 同步更新问题项的 ARIA 状态
$question
.attr('aria-expanded', 'true')
.removeAttr('tabindex'); // 可选：已展开时移除 tabIndex 提升焦点流合理性
// 3. （可选）平滑滚动至展开区域顶部，提升可视体验
$('html, body').animate({
scrollTop: $answer.offset().top - 80 // 减去头部高度留白
}, 300);
}
}
}
}
};
})(jQuery, Drupal);⚠️ 关键注意事项：
- 时机至关重要：必须在 DOM 完全就绪且 FAQ 内容已渲染后执行（Drupal.behaviors 的 attach 回调中 context === document 是安全判断点）；
- 严格校验哈希格式：使用正则 /^#faq-\d+$/ 防止 XSS 或无效选择器错误；
- 双向状态同步：仅显示答案不够——必须同时设置 aria-expanded="true" 于对应问题项，否则屏幕阅读器无法正确播报展开状态；
- 避免重复执行：Drupal 可能对 AJAX 加载内容多次调用 behaviors，需通过 context === document 限定仅主页面加载时生效；
- 无障碍优先：保留 tabindex 逻辑（展开后可考虑移除，因答案本身非焦点目标），并确保键盘用户可通过 Tab 导航到问题项后回车触发展开（本方案不替代原交互，仅补充初始状态）。
? 进阶建议：若项目使用现代 CSS（如 @starting-style 或 transition-behavior），可逐步迁移至纯 CSS 控制显隐（配合 :target 伪类），但当前需兼顾 IE 兼容性与 Drupal 7/8/9 多版本支持时，上述 jQuery 方案仍是最稳定、可维护的选择。
通过以上实现，用户从外部链接带锚点进入 FAQ 页面时，不仅能立即看到目标答案，还能获得与手动交互完全一致的动画、焦点管理和无障碍支持，真正实现「所见即所得」的用户体验闭环。
