MaterializeCSS - 单击时不显示移动折叠菜单

Question

我正在使用 Materialise CSS v0.97、jQuery Mobile v1.4.5 和 jQuery v2.1.4 开始一个网络应用程序。

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

Answer 1

生活就是这样——只要我抱怨，接下来我就会成功。

我保留了上面的代码，仅更改了 jQuery 移动导入以指向本地编辑版本，现在它在 Chrome 中运行菜单有效。

很可能我在本地化其余依赖项时遇到了一些问题，但现在我很好。

MaterializeCSS - 单击时不显示移动折叠菜单

MaterializeCSS - Mobile Collapse menu not showing when clicked

materialize

jquery-mobile