Bootstrap 4.6：点击子菜单跳转页面后如何保持折叠菜单展开

从你的代码能看出用的是Bootstrap折叠组件，下面是三种直接可用的解决方法：

方案1：通过URL参数标记 #

在子菜单的跳转链接里加个参数（比如?activeMenu=submenu1），页面加载时读取这个参数，自动展开对应菜单。

步骤1：修改子菜单链接 #

比如子菜单里的跳转链接改成：

<li><a class="nav-link" href="/profile.html?activeMenu=submenu1">个人资料</a></li>

步骤2：添加页面加载时的JS代码 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取URL里的activeMenu参数
  const urlParams = new URLSearchParams(window.location.search);
  const activeMenu = urlParams.get('activeMenu');
  
  if (activeMenu) {
    // 找到对应的折叠菜单，添加show类使其展开
    const collapseMenu = document.getElementById(activeMenu);
    if (collapseMenu) {
      collapseMenu.classList.add('show');
      collapseMenu.setAttribute('aria-expanded', 'true');
      // 找到对应的父级nav-link，去掉collapsed类
      const parentLink = collapseMenu.previousElementSibling;
      if (parentLink && parentLink.classList.contains('nav-link')) {
        parentLink.classList.remove('collapsed');
        parentLink.setAttribute('aria-expanded', 'true');
      }
    }
  }
});

方案2：通过当前页面路径匹配 #

如果子菜单链接指向具体页面（比如/account/settings.html），可以直接通过当前页面路径判断，不用加URL参数。

JS代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前页面的路径部分
  const currentPath = window.location.pathname;
  
  // 匹配对应子菜单的页面路径，展开对应的菜单
  if (currentPath.includes('/profile.html') || currentPath.includes('/settings.html')) {
    // 展开submenu1
    const collapseMenu = document.getElementById('submenu1');
    collapseMenu.classList.add('show');
    collapseMenu.setAttribute('aria-expanded', 'true');
    const parentLink = collapseMenu.previousElementSibling;
    parentLink.classList.remove('collapsed');
    parentLink.setAttribute('aria-expanded', 'true');
  }
});

方案3：使用本地存储记录状态 #

点击子菜单时，把当前展开的菜单ID存在localStorage里，页面加载时读取这个ID展开菜单，适合同一域名下的页面跳转。

步骤1：给子菜单链接加点击事件 #

<!-- 修改子菜单的a标签，添加点击事件 -->
<li><a class="nav-link" href="/profile.html" onclick="saveActiveMenu('submenu1')">个人资料</a></li>

步骤2：添加JS代码 #

// 保存当前激活的菜单ID
function saveActiveMenu(menuId) {
  localStorage.setItem('activeCollapseMenu', menuId);
}

// 页面加载时读取并展开
document.addEventListener('DOMContentLoaded', function() {
  const activeMenu = localStorage.getItem('activeCollapseMenu');
  if (activeMenu) {
    const collapseMenu = document.getElementById(activeMenu);
    if (collapseMenu) {
      collapseMenu.classList.add('show');
      collapseMenu.setAttribute('aria-expanded', 'true');
      const parentLink = collapseMenu.previousElementSibling;
      parentLink.classList.remove('collapsed');
      parentLink.setAttribute('aria-expanded', 'true');
    }
  }
});

注意事项 #

• 确保已经引入Bootstrap的CSS和JS，折叠组件能正常工作
• 如果用方案3，可在用户手动折叠菜单时删除localStorage里的对应项，避免状态残留

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