mmenu js API - 菜单未显示

Question

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

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

谷歌搜索后，我发现 jquery.mmenu.all.js 文件的 link 应该包含所有附加组件。但后来我遇到了另一个问题。您可以看到菜单的动画，但是它显示为空白，因为它的 css 显示属性设置为“none”。

我正在使用以下 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();
}

你可以在这个fiddle中看到我的问题。

http://jsfiddle.net/6anbksxd/

你们能帮帮我吗？

提前致谢

Answer 1

请将此添加到您的 CSS。

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

已更新 JSFiddle。

mmenu js API - 菜单未显示

mmenu js API - menu not showing

javascript

css

api

mmenu

display