在加载页面之前，mmenu-js菜单不起作用，turbolinks不会加载mmenu-js

问题描述

我遇到了Turbolink的问题，在mmenu-js侧面菜单正常工作之前，我总是必须刷新页面。这是我的代码： $（document）.on（'turbolinks：load'，function（）{

    // Mobile Mmenu
var $menu = $("nav#menu").mmenu({
    "extensions": ["pagedim-black"],counters: false,keyboardNavigation: {
        enable: true,enhance: true
    },navbar: {
        title: 'MENU'
    },navbars: [{position:'bottom',content: ['<a href="#0">© 2020 Azalearn</a>']}]},{
    // configuration
    clone: true,classNames: {
        fixedElements: {
            fixed: "menu_2",sticky: "sticky"
        }
    }
});
var $icon = $("#hamburger");
var API = $menu.data("mmenu");
$icon.on("click",function () {
    API.open();
});
API.bind("open:finish",function () {
    setTimeout(function () {
        $icon.addClass("is-active");
    },100);
});
API.bind("close:finish",function () {
    setTimeout(function () {
        $icon.removeClass("is-active");
    },100);
});

）;

解决方法

我不确定mmenujs是否更多，但是是否有Turbolink包装器：

<script>
    document.addEventListener(
        "DOMContentLoaded",() => {
            new Mmenu( "#my-menu",{
                wrappers: ["turbolinks"]
            });
        }
    );
</script>

它做什么

使用“ turbolinks”包装器将使菜单以“ turbolinks方式”导航到新页面后可以重新启动菜单。

https://mmenujs.com/docs/wrappers/turbolinks.html

如果还有另一个mmenu，则必须重置脚本希望提供的菜单状态：

document.addEventListener("turbolinks:before-cache",function() {
  // something like
  $mmenu.destroy()
})

https://github.com/turbolinks/turbolinks#preparing-the-page-to-be-cached