ASP.NET母版页集成sidebar-menu 回发后保持菜单选中展开状态

• 存储逻辑存在硬编码错误：点击回调里执行localStorage.setItem('currentMenu',currMenu)时，currMenu是未被赋值的全局变量，写入存储的始终是undefined，页面刷新后读取自然拿不到有效内容
• 状态触发逻辑写法错误：$('.sidebar-menu').click(currMenu)的调用方式不符合jQuery语法规则——给click方法传字符串是指定事件委托的子选择器，不是触发指定元素的点击，这行代码实际没有任何恢复菜单状态的作用
• 状态规则和组件逻辑不匹配：原组件的点击逻辑仅会给展开父菜单的li添加active类，从未给实际选中的子页面导航项添加高亮样式，即使触发点击，也不会产生当前页选中的视觉效果
• 回发场景适配缺失：ASP.NET整页回发时，a标签的点击事件和表单提交是并行触发的，直接在a标签点击时写入localStorage，可能因为页面跳转/刷新太快，导致写入操作未完成就被中断

• 第一步：统一存储规则，用页面路径作为导航项的唯一标识，避免DOM结构变动带来的匹配失效
  替换原来的点击存储逻辑，用事件委托绑定在菜单容器上，兼容普通链接、ASP.NET回发控件的点击场景：

  // 绑定在静态的菜单容器上，所有子项点击都会触发回调
  $('.sidebar-menu').on('click', 'li a', function () {
      const targetHref = $(this).attr('href');
      // 跳过空链接、外链、javascript触发的节点
      if (targetHref && targetHref !== '#' && !targetHref.startsWith('http') && !targetHref.startsWith('javascript')) {
          // 把当前点击的导航路径存入本地存储
          localStorage.setItem('currentNavPath', targetHref);
      }
  });
  

• 第二步：页面加载时直接按照组件的类名规则恢复状态，不使用模拟点击的方式（避免动画闪烁、事件逻辑冲突）
  替换原来的初始化恢复逻辑，先清空所有默认的菜单状态，再匹配本地存储的路径逐级展开父级菜单、添加选中类：

  $(document).ready(function () {
      // 先初始化组件的交互逻辑
      $.sidebarMenu($('.sidebar-menu'));
      
      // 清空所有默认展开、选中的状态
      $('.sidebar-menu .sidebar-submenu.menu-open').removeClass('menu-open').hide();
      $('.sidebar-menu li.active').removeClass('active');
      
      // 读取本地存储的导航路径
      const savedPath = localStorage.getItem('currentNavPath');
      if (!savedPath) return;
      
      // 匹配对应的导航链接
      const $currentNavLink = $(`.sidebar-menu a[href="${savedPath}"]`);
      if ($currentNavLink.length === 0) return;
      
      // 向上遍历所有父级子菜单，逐级展开
      let $parentSubmenu = $currentNavLink.parent('li').parent('ul.sidebar-submenu');
      while ($parentSubmenu.length > 0) {
          // 展开子菜单、添加组件要求的open类
          $parentSubmenu.show().addClass('menu-open');
          // 给父级li添加组件要求的active类
          $parentSubmenu.parent('li').addClass('active');
          // 继续向上找更外层的菜单层级
          $parentSubmenu = $parentSubmenu.parent('li').parent('ul.sidebar-submenu');
      }
      
      // 给当前选中的子菜单项添加自定义高亮类（样式可自行在css里定义）
      $currentNavLink.parent('li').addClass('current-active');
  });
  

• 第三步：样式补全，给当前选中的菜单项增加高亮效果，在你的css文件里补对应的规则即可：

  .sidebar-menu li.current-active > a {
      color: #fff;
      background: #48586a;
  }
  

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