MetisMenue 在移动视图 SB Admin 2 上不能很好地折叠答案

【问题标题】：MetisMenue does not collapse well on mobile view SB Admin 2MetisMenue 在移动视图 SB Admin 2 上不能很好地折叠
【发布时间】：2018-01-23 10:06:48
【问题描述】：

我在一个项目中使用“SB Admin 2”主题。

集成的 Metis 菜单在台式机和平板电脑上运行良好。但是当我用手机访问该页面时，菜单并没有完全隐藏。只有当我滚动页面时。

如果您将浏览器缩小到像移动屏幕一样，菜单不会隐藏。

我尝试在 index.html 文件的底部使用$('#side-menu').metisMenu('collapse'); 执行此操作，但它不起作用。这也在 sb-admin-2.js 文件中定义。但它也不起作用。

你能帮我把菜单完全隐藏起来吗，即使是在移动设备上？

【问题讨论】：

【解决方案1】：

您可以通过仅使用 css 隐藏它来做到这一点

.navbar-top-links {
  display: none 
}

或者，如果您不想始终仅在单击按钮时隐藏它。在当前无序列表 (ul) 之前使用这些属性创建一个新按钮

<button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true">

并替换此代码

<ul class="nav navbar-top-links navbar-right">

使用此代码

<ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2">

我设法让它像这样工作，只是你必须为按钮设置样式并将其放置在正确的位置。

【讨论】：

这个问题令人困惑。你能帮我把菜单完全隐藏，即使在移动设备上？
桌面上的菜单显示在左侧。当设备较小时，菜单会折叠。但在移动设备中它不会完全崩溃。
您可以通过在具有这些属性的<ul> 之前创建一个新按钮来执行此操作。 <button type="button" class="collapse-2" data-toggle="collapse" href="#collapse2" aria-expanded="true"> </button> 将此 <ul class="nav navbar-top-links navbar-right"> 替换为此代码 <ul class="nav navbar-top-links navbar-right navbar-expand-sm navbar-collapse panel-collapse collapse" id="collapse2"> 我设法让它像这样工作。

【解决方案2】：

metismenu 使用较新的 Jquery 版本存在问题： https://github.com/onokumus/metismenu/issues/128

【讨论】：