菜单边栏插件不能正常工作(初始状态关闭)

Question

我使用jquery的mmenu插件和侧边栏插件(https://mmenujs.com/docs/addons/sidebar.html)。不幸的是，我无法使初始状态正常工作。

const menu = new Mmenu(
"#menu",
{
counters: {
add: true,
},
iconPanels: {
add: true,
visible: "first",
},
navbar: {
title: "...",
},
navbars: [
{
position: "top",
content: ["searchfield"],
},
{
position: "top",
},
],
setSelected: {
hover: true,
parent: true,
},
sidebar: {
collapsed: {
use: 768,
},
expanded: {
use: 1440,
initial: "closed",
},
},
theme: "white",
},
{
offCanvas: {
page: {
selector: "#page",
},
},
searchfield: {
cancel: true,
clear: true,
},
}
);

问题:如果第一次打开html文件(viewport>1440px)，菜单关闭(酷!)但如果我切换到浏览器中的另一个选项卡，或者最小化窗口并重新输入，菜单就会打开。似乎与事件的"可见度变化"有关。如果下载带有演示的mmenu master (https://github.com/FrDH/mmenu-js/archive/master.zip)并打开advanced.html

，就可以对其进行测试。作为一个小修复，我可以关闭与可见度变化事件的菜单，但如果用户打开菜单，改变选项卡，然后返回，我不希望菜单关闭!

const api = menu.API;
document.addEventListener("visibilitychange", function() {
setTimeout(function() { api.close(); }, 50);
});

任何想法?

Answer 1

这就是你要找的那部分代码:

sidebar: {
collapsed: {
use: "(min-width: 768px)",
},
expanded: {
use: "(min-width: 1024px)",
initial: "closed",
},
},

设置菜单的状态。如果viewport>= 1024px，初始状态将关闭，但它将在50ms后打开菜单。如果视窗较小，则状态将保持关闭。

改成:

sidebar: {
collapsed: {
use: "(min-width: 768px)",
},
expanded: {
use: false,
initial: "closed",
},
},

然后将没有初始展开状态，菜单将简单地关闭。

您可以将collapsed设置为(min-width: 0px)或false，以确保它也不会自动折叠。