javascript - 让 jquery mmenu 在 768px 以上的正常文档流中显示

Question

我正在尝试获取mmenu当高于某个屏幕宽度时以正常文档流显示，低于该宽度则按开箱即用的方式显示。我遇到了一个提到“克隆”的答案，尽管我不确定这意味着什么(只是用不同的 ID 复制菜单吗？)...我有一个项目，有一个 15 页的网站，这将是非常适合，如果我能让它按我想要的方式工作的话!任何帮助将不胜感激!

我尝试像这样包装函数(我的 jQuery/javascript 绝对不是我的强项!):

$(document).ready(function($) {
  if($(window).width() < 768) {
        $("#menu").mmenu();
  }
});

HTML:

<nav id="menu">
    <ul>
        <li class="Selected"><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
    </ul>
</nav>

Answer 1

创建克隆(是的，更改其 ID)会为您提供两个具有相同 HTML 的 NAV。在第一个 NAV 上触发插件并使用 CSS 和媒体查询将其显示在移动网站中。再次使用 CSS 和媒体查询将其隐藏在桌面站点中。反之亦然，使用 CSS 和媒体查询隐藏移动网站中的第一个 NAV 并将其显示在桌面网站中。

请注意，mmenu 插件有一个用于克隆菜单的内置选项，该选项会自动在菜单中的所有 ID 前面加上“mm-”:

$("#menu").mmenu({
   clone: true
});