侧边栏子链接点击添加白色背景后如何自动展开对应子菜单？

这个问题其实很常见，核心就是页面加载/URL切换时，根据当前活跃的子链接反向找到父菜单并触发展开。下面我分原生JS、jQuery和SPA场景（比如Vue/React）三种情况给你具体实现方案，你可以根据项目技术栈来选：

一、原生JavaScript方案（通用无依赖） #

假设你的侧边栏HTML结构大概是这样（可以替换成你项目里的类名）：

<aside class="sidebar">
  <ul class="main-menu">
    <li class="menu-item">
      <a href="/home" class="menu-link">首页</a>
    </li>
    <li class="menu-item has-children">
      <a href="#" class="menu-link toggle-btn">系统设置</a>
      <ul class="sub-menu hidden">
        <li class="sub-item">
          <a href="/settings/profile" class="sub-link">个人资料</a>
        </li>
        <li class="sub-item">
          <a href="/settings/notification" class="sub-link">通知设置</a>
        </li>
      </ul>
    </li>
  </ul>
</aside>

添加以下JS代码，放在页面底部或者DOM加载完成的钩子中：

document.addEventListener('DOMContentLoaded', function() {
  // 1. 获取当前页面的URL路径（忽略参数和哈希）
  const currentPath = window.location.pathname;
  
  // 2. 找到匹配当前路径的子链接
  const activeSubLink = document.querySelector(`.sub-link[href="${currentPath}"]`);
  
  if (activeSubLink) {
    // 3. 高亮当前子链接（你已经实现，这里可以复用你的逻辑）
    activeSubLink.classList.add('active');
    
    // 4. 找到父级子菜单容器，移除隐藏类/添加显示类
    const subMenu = activeSubLink.closest('.sub-menu');
    subMenu.classList.remove('hidden');
    subMenu.classList.add('show');
    
    // 5. 给父级的切换按钮添加激活状态（可选，提升体验）
    const toggleBtn = subMenu.previousElementSibling;
    if (toggleBtn) {
      toggleBtn.classList.add('active');
    }
    
    // 6. 处理多层嵌套子菜单：递归展开上层所有父菜单（如果有的话）
    let parentMenuItem = subMenu.closest('.has-children');
    while (parentMenuItem && parentMenuItem.parentElement.closest('.sub-menu')) {
      const parentSubMenu = parentMenuItem.parentElement.closest('.sub-menu');
      parentSubMenu.classList.remove('hidden');
      parentSubMenu.classList.add('show');
      const parentToggle = parentSubMenu.previousElementSibling;
      if (parentToggle) parentToggle.classList.add('active');
      parentMenuItem = parentSubMenu.closest('.has-children');
    }
  }
});

对应的CSS样式（确保显示/隐藏生效）：

.sub-menu.hidden { display: none; }
.sub-menu.show { display: block; }
/* 激活状态样式，你已经有了，这里示例一下 */
.sub-link.active, .menu-link.active { background-color: #fff; }

二、jQuery方案（如果项目用了jQuery） #

如果你的项目依赖jQuery，代码会更简洁，尤其是用Bootstrap的collapse组件时：

$(document).ready(function() {
  const currentPath = window.location.pathname;
  const $activeSubLink = $(`.sub-link[href="${currentPath}"]`);
  
  if ($activeSubLink.length) {
    // 高亮子链接
    $activeSubLink.addClass('active');
    // 展开父级collapse菜单（Bootstrap的collapse组件直接调用show方法）
    $activeSubLink.closest('.sub-menu').collapse('show');
    // 给父级切换按钮加激活类
    $activeSubLink.closest('.has-children').find('.toggle-btn').addClass('active');
    
    // 多层子菜单递归展开
    let $parentSubMenu = $activeSubLink.closest('.sub-menu').parent().closest('.sub-menu');
    while ($parentSubMenu.length) {
      $parentSubMenu.collapse('show');
      $parentSubMenu.prev('.toggle-btn').addClass('active');
      $parentSubMenu = $parentSubMenu.parent().closest('.sub-menu');
    }
  }
});

三、SPA框架场景（Vue/React） #

如果是Vue或者React这类单页应用，因为URL切换是前端路由，不需要刷新页面，所以要在路由切换完成后执行展开逻辑：

Vue项目示例： #

在router/index.js中添加路由后置钩子：

import router from './router';

router.afterEach((to) => {
  // 等待DOM更新完成再操作
  setTimeout(() => {
    const activeSubLink = document.querySelector(`.sub-link[href="${to.path}"]`);
    if (activeSubLink) {
      const subMenu = activeSubLink.closest('.sub-menu');
      subMenu.classList.add('show');
      subMenu.previousElementSibling.classList.add('active');
    }
  }, 0);
});

React项目示例： #

用useEffect监听路由变化：

import { useLocation } from 'react-router-dom';

function Sidebar() {
  const location = useLocation();
  
  useEffect(() => {
    const activeSubLink = document.querySelector(`.sub-link[href="${location.pathname}"]`);
    if (activeSubLink) {
      const subMenu = activeSubLink.closest('.sub-menu');
      subMenu.classList.add('show');
      subMenu.previousElementSibling.classList.add('active');
    }
  }, [location.pathname]);
  
  // 渲染侧边栏的代码...
}

关键注意点 #

• 选择器匹配：一定要确保你的类名（比如.sub-link、.sub-menu）和项目中的实际类名一致，不然找不到元素就不会生效。
• URL匹配：如果你的URL带有参数（比如/settings/profile?id=123），用window.location.pathname就足够，因为它会忽略参数；如果是哈希路由（比如/#/settings/profile），要换成window.location.hash或者框架提供的路由路径。
• 多层嵌套：如果有超过两层的子菜单，记得加上递归展开的逻辑，不然上层菜单还是折叠状态，用户看不到高亮的子链接。

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