在 Apache Cordova 中实现 CSS sidenav答案

【问题标题】：Materialize CSS sidenav in Apache Cordova在 Apache Cordova 中实现 CSS sidenav
【发布时间】：2016-03-30 04:45:21
【问题描述】：

我在使用 jQuery 的 apache cordova 中使用 Materialize css 构建材料设计 sidenav 时遇到了一些麻烦。 chrome 控制台说：

未捕获的类型错误：$(...).sideNav 不是函数

index.html 正文：

<body>
    <nav>
        <ul class="right hide-on-med-and-down">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <ul id="slide-out" class="side-nav">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </nav>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
    <script type="text/javascript" src="scripts/materialize.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>

script.js：

$(".button-collapse").sideNav();

【问题讨论】：

从 Materialize link 获取 init hack 然后确保在我的 JS 中最后一次调用它。将它放在 JS 的其余部分之前会导致它失败。告诉我它是否有效。
将script.js放到materialize.js下
@Raymond 解决了！说出答案

标签： javascript jquery html materialize apache-cordova

【解决方案1】：

从此更改您的代码：

<body>
    <nav>
        <ul class="right hide-on-med-and-down">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <ul id="slide-out" class="side-nav">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </nav>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
    <script type="text/javascript" src="scripts/materialize.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>

到这里：

<body>
    <nav>
        <ul class="right hide-on-med-and-down">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <ul id="slide-out" class="side-nav">
            <li><a href="#!">First Sidebar Link</a></li>
            <li><a href="#!">Second Sidebar Link</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    </nav>
    <script type="text/javascript" src="scripts/jquery.js"></script>
    <script type="text/javascript" src="scripts/materialize.js"></script>
    <script type="text/javascript" src="scripts/script.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>

【讨论】：

【解决方案2】：

jsbin demo 看起来可行。

【讨论】：

不。我只是认为你应该使用 jsFiddle，因为它更好地读写，是的，我知道它已经关闭了，但是......