Question

我正在使用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]

Answer 1

使用此链接加载文件：

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>

Answer 2

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

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

菜单mmenu没有显示jquery mobile

2 个答案: