全局Header菜单点击：跨页可打开Bootstrap折叠面板，同页无响应排查

我帮你梳理下问题所在：你的JS代码是放在页面加载完成的回调里（$(function(){})），这个回调只会在页面第一次初始化完成时执行一次。当你从index.html跳转到product.html时，页面是全新加载的，所以会触发这个回调，读取URL里的hash并打开对应面板；但当你在product.html内部点击菜单时，只是URL的hash发生了变化，页面并没有重新加载，所以这个初始化回调不会再次运行，自然就没反应啦。

修复步骤 #

1. 重构JS逻辑，监听hash变化 #

把处理折叠面板的逻辑抽成独立函数，然后同时监听页面初始化和hash变化事件：

$(function(){
  // 定义处理hash切换折叠面板的函数
  function activateAccordionPanel() {
    const currentHash = window.location.hash;
    // 确保hash不为空，且对应的面板存在
    if (currentHash && $(currentHash).length) {
      // 先关闭所有已展开的折叠面板
      $('.accordion-collapse.show').collapse('hide');
      // 展开目标面板
      $(currentHash).collapse('show');
    }
  }

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

  // 监听URL hash变化事件（页面内跳转时触发）
  $(window).on('hashchange', function() {
    activateAccordionPanel();
  });
});

2. 检查菜单链接与面板ID的对应关系 #

确保菜单里的链接href属性值和折叠面板的id完全一致，比如菜单链接是<a href="#product-panel-1">产品1</a>，对应的折叠面板容器ID就得是product-panel-1，同时面板的data-bs-parent要正确指向父级accordion容器，保证折叠面板的互斥性。

3. 确认Bootstrap依赖加载正常 #

如果用的是Bootstrap 5，要确保已经正确引入了Bootstrap的JS文件和Popper.js（折叠功能依赖Popper），比如：

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>

这样修改后，不管是从其他页面跳转过来，还是在product.html内部点击菜单，只要URL的hash变化，对应的折叠面板都会自动切换啦。

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