我正在使用 Materialize CSS v0.97、jQuery Mobile v1.4.5 和 jQuery v2.1.4 开始一个 Web 应用程序。
我正在尝试使用 the mobile collapse tutorial在 jQuery Mobile header 中有一个导航栏，在移动设备上该导航栏会更改为汉堡包按钮，单击时会出现菜单。
当我将浏览器(Chrome，Mac v10.11 上的最新版本)调整为移动设备大小时，会出现汉堡包，但单击或悬停或任何其他操作都不会显示菜单。
我唯一改变的是注释掉 jQuery Mobile JS 中的一行，因为 this post about how to fix the Chrome security warning .
这可能是导航栏不起作用的原因吗？由于该警告，我的网站根本不会加载以下代码，因此我将所有 js 和 css 以及它们的相对链接保存在本地。但这个片段在片段预览中有效......
$( document ).ready(function(){
$(".button-collapse").sideNav();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<div data-role="page" id="home">
<div data-role="header">
<nav>
<div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<table class="centered">
<thead>
<tr>
<th data-field="collection">Collection</th>
<th data-field="description"></th>
<th data-field="progress"></th>
<th data-field="link"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff 1</td>
<td>Description of things in Stuff 1. Stuff 1 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 2</td>
<td>Description of things in Stuff 2. Stuff 2 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 3</td>
<td>Description of things in Stuff 3. Stuff 3 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
</tbody>
</table>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>最佳答案
这就是生活——一旦我提示了，我接下来尝试的事情就会起作用。
我保留了上面的代码，仅更改了 jQuery Mobile 导入以指向本地、已编辑的版本，现在它在 Chrome 中运行并且菜单可以工作。
很可能我在本地化其余依赖项时遇到了麻烦，但现在我很好。
关于jquery-mobile - MaterializeCSS - 单击时移动折叠菜单不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32486967/