mMenu JS 如何使它与 RequireJS 一起工作？

Question

我正在尝试使用 RequireJS 运行 mmenu，但有些东西对我来说没有意义，我可能会感到困惑，因此感谢任何澄清。

菜单没有按应有的方式滑出，因此我试图了解 mmenu 是否具有此内置功能，但除此之外，我还尝试运行以下命令：

jQuery('.js-slideout-toggle').click(function () {
        $("#menu").toggle("slide");
    });

但是当我点击菜单时，什么也没有发生，最重要的是我收到了未定义的错误消息：

Uncaught TypeError: Cannot read property 'toggle' of null

我的common.js：

requirejs.config({

    paths : {
        "app" :                 "app",
        "jquery" :              "lib/jquery/jquery-3.3.1.min",
        "jquerymigrate" :       "lib/jquery/jquery-migrate-3.0.1.min",
        "noconflict" :          "lib/jquery/noconflict",
        "bootstrap" :           "lib/bootstrap/bootstrap.bundle.min",
        "jquerymhead" :         "lib/jquery/jquery.mhead",
        "jquerymmenu" :         "lib/jquery/jquery.mmenu",
        "jquerymmenumagento" :  "lib/jquery/jquery.mmenu.magento",
        "fontawesome" :         "https://use.fontawesome.com/releases/v5.2.0/js/all",
        "cssrefresh" :          "http://cssrefresh.frebsite.nl/js/cssrefresh"
        },

    shim: {
        "jquery": {
            exports: '$'
        },
        "jquerymigrate": {
            deps: ["jquery"]
        },
        "noconflict": {
            deps: ["jquery"]
        },
        "bootstrap": {
            deps: ["jquery"]
        },
        "jquerymhead": {
            deps: ["jquery"]
        },
        "jquerymmenu": {
            deps: ["jquery"],
            exports: "mmenu"
        },
        "jquerymmenumagento": {
            deps: ["jquery","jquerymmenu"]
        },
        "app": {
            deps: ["jquery","jquerymmenu"]
        }

    }
});

这是我的 app.js：

 window.onload = function() {
             /*** mMenu Initialization ***/
             jQuery("#menu").mmenu({
                "wrappers": [
                         "magento"
                 ],
                "navbars": [
                   {
                      "position": "top"
                   },
                   {
                      "position": "bottom",
                      "content": [
                         "<a href='#/'><i class='fas fa-envelope'></i></a>",
                         "<a href='#/'><i class='fab fa-facebook'></i></a>",
                         "<a href='#/'><i class='fab fa-twitter-square'></i></a>"
                      ]
                   }
                ]
             });
             /*** mMenu Initialization ***/
             /** Hamburger Effects Initialization **/
             var hamburger = document.querySelector(".hamburger");
               // On click
               hamburger.addEventListener("click", function() {
                 // Toggle class "is-active"
                 hamburger.classList.toggle("is-active");
               });
             /** Hamburger Effects Initialization **/
 };

Answer 1

我认为问题在于您的 app.js 文件。您需要指定文件具有哪些依赖项以及所有 RequireJS 以将它们注入其中：

require(['jquery', 'jquerymmenu'], function ($) {
     window.onload = function() {
                 /*** mMenu Initialization ***/
                 jQuery("#menu").mmenu({
                    "wrappers": [
                             "magento"
                     ],
                    "navbars": [
                       {
                          "position": "top"
                       },
                       {
                          "position": "bottom",
                          "content": [
                             "<a href='#/'><i class='fas fa-envelope'></i></a>",
                             "<a href='#/'><i class='fab fa-facebook'></i></a>",
                             "<a href='#/'><i class='fab fa-twitter-square'></i></a>"
                          ]
                       }
                    ]
                 });
                 /*** mMenu Initialization ***/
                 /** Hamburger Effects Initialization **/
                 var hamburger = document.querySelector(".hamburger");
                   // On click
                   hamburger.addEventListener("click", function() {
                     // Toggle class "is-active"
                     hamburger.classList.toggle("is-active");
                   });
                 /** Hamburger Effects Initialization **/
     };
});