MaterializeCSS -移动设备折叠菜单在单击时不显示
MaterializeCSS -移动设备折叠菜单在单击时不显示
提问于 2015-09-10 02:40:23
我开始使用Materialize CSSv0.97、jQuery Mobilev1.4.5和jQuery v2.1.4开发web应用程序。
我正在尝试使用the mobile collapse tutorial在jQuery移动标题中添加一个导航栏，在移动设备上，导航栏在移动设备上会变成一个汉堡包按钮，单击时菜单就会出现。
当我将浏览器(Chrome，Mac v10.11上的最新版本)调整为移动大小时，汉堡包会出现，但单击或悬停或其他任何操作都不会显示菜单。
由于this post about how to fix the Chrome security warning，我唯一改变的是注释掉了jQuery Mobile JS中的一行。
这可能是导航栏不工作的原因吗？由于这个警告，我的站点根本不能使用下面的代码加载，所以我将所有的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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-09-10 02:44:57
这就是生活--只要我抱怨，我就会尝试下一件事。
我保留了上面的代码，只将Chrome导入更改为指向本地编辑的版本，现在它可以在jQuery中运行，菜单也可以正常工作。
很可能是我在本地化其他依赖项时出了问题，但现在我很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32486967
复制相关文章
相似问题
腾讯云开发者
