如何通过锚点链接跳转并打开Bootstrap 5.3手风琴项？

一、修正外部链接写法 #

你现有链接存在拼写错误（如csMessageitem应为csMessageItem、accordtionMessging应为accordionMessaging）、误用Bootstrap 3旧属性data-toggle等问题，以下是对应每个手风琴项的正确链接写法：

第一个手风琴项的链接：

<a href="#csMessageItem" data-bs-toggle="collapse" data-bs-target="#csMessageContent" aria-expanded="false" aria-controls="csMessageContent">Compose & Send Messages</a>

第二个手风琴项的链接：

先给第二个手风琴项的容器加IDpublicFollowersItem，折叠面板加IDpublicFollowersContent，再写链接：

<a href="#publicFollowersItem" data-bs-toggle="collapse" data-bs-target="#publicFollowersContent" aria-expanded="false" aria-controls="publicFollowersContent">Unlimited "Public" Followers</a>

第三个手风琴项的链接：

给第三个手风琴项容器加IDgroupsItem，折叠面板加IDgroupsContent，链接写法：

<a href="#groupsItem" data-bs-toggle="collapse" data-bs-target="#groupsContent" aria-expanded="false" aria-controls="groupsContent">Groups and Custom Communications</a>

二、规范手风琴内部属性（可选） #

手风琴按钮的aria-controls属性应直接指向对应折叠面板的ID，而非选择器，更符合无障碍标准。比如第一个按钮修正后：

<button id="composingmessages" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#csMessageContent" aria-expanded="true" aria-controls="csMessageContent">Composing and Sending Messages</button>

三、处理页面加载时的哈希跳转 #

如果用户直接访问带哈希的URL（如yourpage.html#csMessageContent），需要自动展开对应项并跳转。将以下代码复制到页面底部（</body>标签前）：

document.addEventListener('DOMContentLoaded', function() {
  const hash = window.location.hash;
  if (hash && hash.startsWith('#')) {
    const collapseElement = document.querySelector(hash);
    if (collapseElement && collapseElement.classList.contains('accordion-collapse')) {
      new bootstrap.Collapse(collapseElement, { toggle: true });
      collapseElement.scrollIntoView({ behavior: 'smooth' });
    }
  }
});

关键说明 #

• href="#xxx"：负责跳转到指定手风琴项的位置
• data-bs-toggle="collapse"：触发Bootstrap折叠功能
• data-bs-target="#yyy"：指定要展开的折叠面板ID（用ID比类更准确，避免冲突）
• 折叠面板已带data-bs-parent="#accordionMessaging"，展开指定项时其他项会自动收起，保持手风琴互斥特性

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