本文详解如何在页面加载时，根据 URL 中的哈希（如 #faq-1）自动展开对应 FAQ 答案项，包括正确设置 CSS 样式、data 属性及可访问性状态（aria-expanded）。
本文详解如何在页面加载时，根据 url 中的哈希（如 `#faq-1`）自动展开对应 faq 答案项，包括正确设置 css 样式、`data` 属性及可访问性状态（`aria-expanded`）。
在构建可访问、语义化的 FAQ 组件时，仅靠 display: none/block 切换答案内容是不够的——还需同步更新 ARIA 状态、过渡动画与自定义数据属性，以确保键盘导航、屏幕阅读器支持及视觉反馈的一致性。当用户通过外部链接（例如 https://example.com/services/faq#faq-2）直达某条 FAQ 时，应自动展开其答案，并保持交互逻辑与手动点击行为完全一致。
✅ 正确实现步骤
- 监听页面加载完成：确保 DOM 已就绪，再执行哈希解析逻辑；
- 提取有效哈希 ID：校验 window.location.hash 是否匹配 FAQ 答案项（如 #faq-0）；
- 展开目标答案项：不仅设置 display: block，还需添加平滑过渡、data-slide-toggle="true" 及关键 ARIA 同步；
- 更新对应问题项的 aria-expanded 状态：这是可访问性的核心要求，否则屏幕阅读器无法感知展开状态。
以下为生产就绪的 jQuery 实现（兼容 Drupal Behaviors 环境）：
(function ($, Drupal) {
'use strict';
Drupal.behaviors.faqHashExpand = {
attach: function (context, settings) {
// 确保仅在初始加载时执行（避免重复触发）
if (context === document && !Drupal.behaviors.faqHashExpand._initialized) {
const hash = window.location.hash;
// 验证哈希格式：必须为 #faq-N 形式，且对应元素存在
if (hash && /^#faq-\d+$/.test(hash)) {
const $targetAnswer = $(hash);
const $triggerQuestion = $(`[aria-controls="${hash.slice(1)}"]`);
if ($targetAnswer.length && $triggerQuestion.length) {
// 1. 展开答案：应用样式 + 过渡 + data 属性
$targetAnswer
.css({
'display': 'block',
'transition': 'all 300ms ease-in'
})
.data('slide-toggle', true);
// 2. 同步更新问题项的 aria-expanded 状态
$triggerQuestion.attr('aria-expanded', 'true');
// 3. （可选）滚动到可见区域，提升用户体验
$targetAnswer[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
Drupal.behaviors.faqHashExpand._initialized = true;
}
}
};
})(jQuery, Drupal);⚠️ 注意事项与最佳实践
- 不要仅用 .show()：$(hash).show() 会覆盖内联样式并可能丢失 transition，且不设置 data-slide-toggle，导致后续 JS 逻辑误判；
- 必须同步 aria-expanded：仅展开答案而忽略问题项的 aria-expanded="true" 会破坏 WCAG 2.1 AA 合规性，影响视障用户理解；
- 正则校验哈希安全性：防止恶意哈希（如 #faq-<script>）引发选择器异常，/^#faq-\d+$/ 是必要防护；</script>
- 避免重复初始化：在 Drupal Behaviors 中使用 _initialized 标志，防止 AJAX 页面刷新或区块重载时多次执行；
- CSS 优先级建议：若答案项被更高优先级 CSS 强制隐藏（如 !important），需在 CSS 中提高 .list--faq li[id^="faq-"] 的权重，或改用 !important 覆盖（不推荐），更优解是移除冗余强制样式。
✅ 效果验证要点
| 检查项 | 预期结果 |
|---|---|
| URL 访问 ?#faq-1 | 页面加载后 #faq-1 内容可见，带淡入过渡效果 |
| 屏幕阅读器朗读问题项 | 明确播报“已展开”（因 aria-expanded="true"） |
| 键盘 Tab 导航至该问题 | 可聚焦，按 Enter/Space 正常收起（逻辑未被破坏） |
| 查看 DOM 元素 | #faq-1 含 style="display: block; transition: all 300ms ease-in;" 和 data-slide-toggle="true" |
通过以上实现，FAQ 组件既满足前端功能需求，又兼顾无障碍标准与框架兼容性，可直接集成至 Drupal 9/10 主题或任意 jQuery 项目中。
