点击侧边菜单子项后菜单收起，跳转页面如何保持子菜单展开状态

解决方案 #

页面跳转后会重新加载所有资源，内存中临时存储的菜单状态会被清空，我们可以通过浏览器本地存储localStorage持久化保存菜单的展开/收起状态，页面加载时自动读取状态恢复即可。

1. 修改JS代码

将原有JS替换为以下内容：

$(function() {
  // 页面初始化时恢复菜单状态
  const isFeatMenuOpen = localStorage.getItem('featMenuOpen') === 'true';
  if (isFeatMenuOpen) {
    $('nav ul .feat-show').addClass('show');
    $('nav ul .first').addClass('rotate');
  }

  // 菜单点击事件
  $('.feat-btn').click(function() {
    $('nav ul .feat-show').toggleClass('show');
    $('nav ul .first').toggleClass('rotate');
    // 保存最新状态到本地存储
    const currentStatus = $('nav ul .feat-show').hasClass('show');
    localStorage.setItem('featMenuOpen', currentStatus);
  });
});

2. 修复现有代码的语法错误

现有代码存在几处语法问题会导致功能异常，需要同步修正：

• CSS部分：
  • 通配符规则里的padding: 0: user-select: none; 改为 padding: 0; user-select: none;（把冒号替换为分号）
  • 子项hover规则里的color: cyan!; 改为 color: cyan !important;（补全!important语法）
• HTML部分：
  • 箭头span的类名<span class="fas fa-caret-downfirst"></span> 改为 <span class="fas fa-caret-down first"></span>（把first拆为独立类名，和JS里的.first选择器对应）

如果后续需要扩展多组父菜单，只需要给每个父菜单设置唯一标识，存储状态时用不同的localStorage key区分即可。

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