点击路由链接跳转后自动打开对应Bootstrap折叠下拉组件实现方法

完全可以实现，按以下两步配置即可，不需要改动现有折叠组件的基础结构。

1. 调整导航链接传参 #

跳转时把需要打开的折叠面板ID作为标识拼在路由上，支持查询参数或者hash两种方式，二选一即可：

• 查询参数方式（推荐，和普通hash锚点区分更清晰）：

<li>
  <Link to="/testdropdown?collapse=test">
    test
  </Link>                                                       
</li>

• hash方式：

<li>
  <Link to="/testdropdown#test">
    test
  </Link>                                                       
</li>

其他导航项对应替换ID值即可，比如要打开id为faq的折叠面板，就把参数值改成faq。

2. 目标页面增加折叠控制逻辑 #

在目标页面的路由加载完成回调里（React用useEffect、Vue用onMounted+监听路由变化即可），执行以下逻辑：

• 从路由参数/hash中解析出需要打开的折叠面板ID
• 先遍历页面所有已展开的.collapse元素，全部调用Bootstrap Collapse的hide方法关闭，保证其余折叠项都是收起状态
• 如果解析到了合法的目标ID，找到对应DOM元素，调用Collapse的show方法展开即可，可选加滚动定位让用户直接看到展开的内容

以React + React Router v6为例，代码如下：

import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
// 按需引入Bootstrap的Collapse组件，也可以直接用全局挂载的bootstrap.Collapse
import Collapse from 'bootstrap/js/dist/collapse';

export default function DropdownPage() {
  const [searchParams] = useSearchParams();

  useEffect(() => {
    // 读取要打开的折叠ID，用hash传参的话就取window.location.hash.slice(1)
    const targetCollapseId = searchParams.get('collapse');
    
    // 先关闭所有已展开的折叠项
    document.querySelectorAll('.collapse.show').forEach(el => {
      const instance = Collapse.getInstance(el);
      instance?.hide();
    });

    if (targetCollapseId) {
      const targetEl = document.getElementById(targetCollapseId);
      if (targetEl) {
        // 展开目标折叠项
        const targetInstance = Collapse.getOrCreateInstance(targetEl);
        targetInstance.show();
        // 可选：平滑滚动到对应折叠项位置，偏移量按需调整
        targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }, [searchParams]);

  return (
    <div className="page-content">
      {/* 原有折叠组件代码不需要任何修改 */}
      <button data-bs-toggle="collapse" data-bs-target="#test" >
        test dropdown
      </button>
      <div id="test" className="collapse">
        <p>content</p>
      </div>

      {/* 其他折叠组件正常按原有方式编写即可 */}
    </div>
  )
}

如果使用其他技术栈，逻辑完全通用：核心就是路由带目标标识，页面加载时按标识控制折叠组件状态即可，不需要依赖额外的第三方库。

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