mmenu js API - 菜单未显示

问题描述

我想使用 mmenu js API，但我遇到了一些困难。

我能够启动并运行一个基本示例，一切都很好。接下来，我尝试添加一个搜索字段，但该搜索字段未显示。那时我意识到我使用的源 js 文件没有搜索字段插件。

经过一番谷歌搜索后，我找到了一个指向 jquery.mmenu.all.js 文件的链接，该文件据称包含所有附加组件。但后来我遇到了另一个问题。 您可以看到菜单的动画，但显示为空白，因为其 css 显示属性设置为“无”。

我正在使用以下 javascript 来调用 API。

var myMenu = $("#menu");

// initialize mmenu
myMenu.mmenu({
               "navbars": [
                  {
                     "position": "top","content": [
                        "searchfield"
                     ]
                  }
               ],"searchfield": {
                  "panel": true
               }
            },{
               "searchfield": {
                  "clear": true
               }
            });

// initialize mmenu API
var myMenuAPI = myMenu.data( "mmenu" );


// function to set to specific subMenu
function setMMenu(subMenu) {
  // set to subMenu
  var current = myMenu.find(subMenu);

  // myMenuAPI.setSelected(current.first());
  myMenuAPI.openPanel(current.closest(".mm-panel")); 
}

// function to open mmmenu to specific subMenu
function openMMenu() {
  myMenuAPI.open();
}

你可以在这个小提琴中看到我的问题。

http://jsfiddle.net/6anbksxd/

你们能帮我吗？

提前致谢

解决方法

请将其添加到您的 CSS 中。

mm-menu.mm-offcanvas.mm-hasnavbar-top-1.mm-opened {
  display: block;
}

更新了JSFiddle。