如何基于URL锚点自动展开Bootstrap手风琴（Accordion）组件？

该需求完全可以通过JavaScript实现，URL的锚点（#后内容）本身存储在浏览器端，无需服务端参与即可读取操作。

实现思路 #

• 页面加载完成后通过window.location.hash读取当前URL的锚点值
• 匹配锚点对应的手风琴头部元素
• 触发对应手风琴项的展开操作
• 可选支持锚点动态变化时的自动展开（适配页面内点击锚点链接的场景）

适配你当前代码的完整实现 #

你使用的是Bootstrap 5版本的手风琴组件，以下代码可以直接复用：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
  // 定义展开对应手风琴的方法
  function openAccordionByHash() {
    const hash = window.location.hash.slice(1); // 去掉开头的#号
    if (!hash) return; // 没有锚点直接返回

    // 匹配对应ID的手风琴头部
    const accordionHeader = document.getElementById(hash);
    if (!accordionHeader || !accordionHeader.classList.contains('accordion-header')) return;

    // 获取对应折叠面板的目标ID
    const toggleBtn = accordionHeader.querySelector('.accordion-button');
    const targetCollapseId = toggleBtn.getAttribute('data-bs-target');
    if (!targetCollapseId) return;

    // 初始化Bootstrap Collapse实例并展开
    const collapseEl = document.querySelector(targetCollapseId);
    if (collapseEl) {
      const bsCollapse = new bootstrap.Collapse(collapseEl, {
        toggle: false // 不自动切换状态
      });
      bsCollapse.show();
      // 可选：滚动到对应手风琴位置
      accordionHeader.scrollIntoView({ behavior: 'smooth' });
    }
  }

  // 页面加载时执行一次
  openAccordionByHash();

  // 可选：监听锚点变化，支持页面内锚点跳转时自动展开
  window.addEventListener('hashchange', openAccordionByHash);
});

测试效果 #

你给出的示例场景访问/mypage#headingOne时，会自动展开ID为headingOne对应的第一个手风琴项；访问/mypage#headingTwo时会自动展开第二个手风琴项。

注意事项 #

1. 请确保页面已经正确引入Bootstrap 5的JS脚本，否则无法调用Bootstrap内置的Collapse组件方法
2. 如果你的锚点规则和手风琴头部ID不匹配，可以自行调整匹配逻辑，比如锚点用折叠面板的ID的话，修改对应选择器即可

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