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

【问题标题】：MaterializeCSS - Mobile Collapse menu not showing when clickedMaterializeCSS - 单击时不显示移动折叠菜单
【发布时间】：2015-12-05 20:39:00
【问题描述】：

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

我正在尝试使用the mobile collapse tutorial 在 jQuery Mobile 标题中添加一个导航栏，在移动设备上它会变成一个汉堡包按钮，单击时会出现菜单。

当我将浏览器（Chrome，Mac v10.11 上的最新版本）调整为移动设备大小时，会出现汉堡包，但单击或悬停或其他任何操作都不会显示菜单。

我唯一改变的是在 jQuery Mobile JS 中注释掉一行，因为 this post about how to fix the Chrome security warning。
这可能是导航栏不起作用的原因吗？由于该警告，我的网站根本没有加载以下代码，因此我将所有 js 和 css 保存在本地，并带有指向它们的相关链接。但是这个 sn-p 在 sn-p 预览版中工作...

$( 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 materialize

【解决方案1】：

这就是生活——我一抱怨，接下来我尝试的事情就会奏效。

我保留了上面的代码，只将 jQuery Mobile 导入更改为指向本地的已编辑版本，现在它在 Chrome 中运行并且菜单可以正常工作。

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

【讨论】：