如何阻止mmenu在网站内部页面加载时自动滑出展开？

要让mmenu在内部页面跳转时保持展开/收起状态，核心思路是通过本地存储（localStorage）持久化菜单状态，初始化时读取存储的状态来恢复。具体修改如下：

修改后的代码 #

document.addEventListener("DOMContentLoaded", () => {
  // 读取本地存储的菜单状态，默认值为原有大屏初始状态"open"
  const savedMenuState = localStorage.getItem('mmenuState') || 'open';
  // 判断当前屏幕是否符合大屏展开的媒体查询条件
  const isExpandedScreen = window.matchMedia("(min-width: 1200px)").matches;

  const menu = new Mmenu("#menu", {
    "navbar": {
      "title": " "
    },
    "theme": "white",
    "iconbar": {
      "use": true,
      "top": [
        "<a href='#/'><i class='fa-solid fa-house'></i></a>",
      ],
      "bottom": [
        "<a href='#/'><i class='fa-regular fa-envelope'></i></a>",
        "<a href='#/'><i class='fa-brands fa-linkedin-in'></i></a>"
      ]
    },
    "sidebar": {
      "collapsed": {
        "use": "(min-width: 250px)"
      },
      "expanded": {
        "use": "(min-width: 1200px)",
        // 大屏下优先使用保存的状态，小屏保持原有逻辑
        "initial": isExpandedScreen ? savedMenuState : "open"
      }
    },
  });

  // 获取mmenu的API实例，用于监听菜单状态变化
  const api = menu.API;

  // 菜单打开时更新本地存储状态
  api.bind("open", () => {
    localStorage.setItem('mmenuState', 'open');
  });

  // 菜单关闭时更新本地存储状态
  api.bind("close", () => {
    localStorage.setItem('mmenuState', 'closed');
  });
});

关键说明 #

• 持久化状态：用localStorage存储菜单的open/closed状态，页面刷新或跳转后依然能读取到之前的操作状态
• 适配屏幕尺寸：初始化时通过window.matchMedia判断当前屏幕是否属于大屏，仅在大屏模式下应用保存的状态，不影响小屏设备的原有折叠逻辑
• 实时同步：通过mmenu的API绑定open和close事件，每次菜单状态变化时自动更新本地存储，确保状态始终同步

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