如何在页面加载时停止滑出？

Question

对于我的网站，我将 mmenu 配置为在较大屏幕上完全打开，但在较小屏幕上折叠起来。然而，一个有点烦人的方面是，即使在同一站点内的页面之间导航时，菜单也会在每个新页面加载时滑出。

我已经查看了文档，但找不到任何提及如何防止在内部浏览时每次页面更改时菜单自动扩展。最好让它在内部页面之间保持打开状态，以提供更无缝的体验。

有谁知道是否有可用于控制此默认扩展行为的设置或选项？在内部页面加载期间维护菜单状态可以提高网站在较小屏幕上的可用性和感觉。任何解决此问题的建议将不胜感激。

我使用这个插件。这是我的代码。

/m菜单

document.addEventListener(
  "DOMContentLoaded", () => {
      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></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" : "open"
          }
        },
      });
}
);

Answer 1

我想我会在“本地存储”中创建一个值并在您的配置中使用它。使用可用的钩子更新侧边栏操作上的值。这是未经测试的总体想法：

const sidebarExpanded = localStorage.getItem('mySite_sidebarExpanded') || 'open';

const setSidebarState = state => {
  localStorage.setItem('mySite_sidebarExpanded', state);
}

document.addEventListener(
  "DOMContentLoaded", () => {

    const menu = new Mmenu("#menu", {
      // ...
      "sidebar": {
        "collapsed": {
          "use": "(min-width: 250px)"
        },
        "expanded": {
          "use": "(min-width: 1200px)",
          "initial": sidebarExpanded
        }
      },
      hooks: {
        "openPanel:after": setSidebarState(true),
        "closePanel:after": setSidebarState(false)
      }
    });
  }
);