Question

我正在使用Materialise CSS v0.97，jQuery Mobile v1.4.5和jQuery v2.1.4开始使用Web应用程序。

我正在尝试使用the mobile collapse tutorial在jQuery Mobile标题中添加一个导航栏，该标题在移动设备上会更改为汉堡按钮，并在单击时显示菜单。

当我将浏览器（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>

Answer 1

这就是生活 - 一旦我抱怨，我接下来会尝试下去。

我保留了上述代码，仅将jQuery Mobile导入更改为指向本地编辑版本，现在它在Chrome中运行，菜单正常运行。

最有可能的是某些东西搞砸了我本地化其余的依赖，但现在我很好。

MaterializeCSS - 单击时未显示“移动折叠”菜单

1 个答案: