菜单 mmenu 不与 jquery mobile 一起显示答案

【问题标题】：Menu mmenu not displaying with jquery mobile菜单 mmenu 不与 jquery mobile 一起显示
【发布时间】：2015-07-02 06:18:41
【问题描述】：

我正在使用 jQuery UI 来实现 jQuery mobile 的自动完成功能。但是在这两个库的存在下.mmenu 什么也没有显示。

我使用以下代码创建菜单：

$(document).ready(function() {
  var mmenu = $("#mcba-menu").mmenu({}).data('mmenu');
  $('a').click(function(ev) {
    ev.preventDefault();
    mmenu.open();
  });
});

我的标题是：

<head>
  <title>MCBA</title>
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <link rel="shortcut icon" href="./favicon.ico"></link>
  <link href="./resources/css/jquery/jquery-ui.css" rel="Stylesheet"></link>
  <link rel="stylesheet" href="./resources/css/jquery/jquery.mobile- 1.4.5.min.css"></link>
  <link rel="stylesheet" href="./resources/css/3rdparty/hamburger.css"></link>
  <link rel="stylesheet" href="./resources/css/style.css"></link>
  <script src="./resources/js/jquery/jquery.js"></script>
  <script src="./resources/js/jquery/jquery-ui.js" ></script>
  <script src="./resources/js/jquery/jquery.mobile-1.4.5.min.js"></script>
  <script src="./resources/js/component.js"></script>
  <script src="./resources/js/custome.js"></script>
        <script src="http://mmenu.frebsite.nl/mmenu/js/jquery.mmenu.min.all.js?v=5.2.0"></script> 
</head>

正文代码是：

<div class="header">
    <a href="#mcba-menu"></a>
                FLIGHT TRANSFER
</div>
<nav id="mcba-menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
</nav>

![结果页][1]

【问题讨论】：

你真的在加载 mmenu js 文件吗？我的意思是它在你调试时可用吗？

标签： jquery jquery-ui jquery-mobile

【解决方案1】：

在您的正文代码中，使用div 标签而不是nav。如下所示

<div id="mcba-menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
</div>

【讨论】：

【解决方案2】：

使用此链接加载文件：

https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.all.js

所以不是

<script src="http://mmenu.frebsite.nl/mmenu/js/jquery.mmenu.min.all.js?v=5.2.0"></script>

你会：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.all.js"></script>

【讨论】：