Javascript组件不适用于Materialize答案

【问题标题】：Javascript Component not working of MaterializeJavascript组件不适用于Materialize
【发布时间】：2016-06-20 22:32:19
【问题描述】：

我想使用 Materialize 框架但我无法使用它的 JAVASCRIPT 组件，waves-button 工作但其余的都不起作用，我在网上搜索并发现在 Materialize 之前首先调用 jquery 但没有解决我的问题..

这是我的 index.html 页面，我的 init.js 是

<html>
    <head>
        <link rel="stylesheet" href="CSS/materialize.min.css">
        <script src="js/jquery.js"></script>
        <script src="js/materialize.js"></script>
        <script src="js/init.js"></script>
    </head>
    <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>
    </body>
</html>


(function ($) {
    $(function () {

        // Initialize collapse button
        $(".button-collapse").sideNav();
        // Initialize collapsible (uncomment the line below if you use the dropdown variation)
        //$('.collapsible').collapsible();
        $('.button-collapse').sideNav('show');

    }); // end of document ready
})(jQuery);
// end of jQuery name space

我先调用 jquery.js 而不是 materialize.js，但它不起作用。

【问题讨论】：

任何控制台错误？
你能加个小提琴吗？这有助于找出问题所在。
请将您的代码放入 jsfiddle 中好吗？
使用最新版本的 jQuery。最好从 CDN 加载。

标签： javascript jquery html css materialize

【解决方案1】：

您发送的代码正在运行：

(function($) {
  $(function() {
    // Initialize collapse button
    $(".button-collapse").sideNav();
    // Initialize collapsible (uncomment the line below if you use the dropdown variation)
    //$('.collapsible').collapsible();
    $('.button-collapse').sideNav('show');
  }); // end of document ready
})(jQuery); // end of jQuery name space

https://jsfiddle.net/jzob32ed/

那么您使用的是哪个 jquery 版本？实现？任何其他与 jquery 冲突的框架？你能在你的问题中转储控制台输出吗？

【讨论】：

我的 jquery 版本是 1.3.2
并且materialize的版本是v0.97.5
好吧，我想它是你的 jquery 版本，如果我没记错的话，materialize 是兼容 jquery > 2
是的，您在使用 cdn linkk 后是正确的。谢谢

【解决方案2】：

这是一个小提琴，它会引导您了解导航栏的基本结构，并在汉堡图标的切换按钮上滑出。我用过 jQuery 2.2.0 和 Materialize 0.97.5。

JSFiddle

Javascript：

(function ($) {
  $(function () {
     $('.button-collapse').sideNav({
        menuWidth: 300, // Default is 240
        closeOnClick: true
      );
      $('.collapsible').collapsible();
  });
})(jQuery);

标记（HTML）：

<nav>
  <ul class="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 fixed">
      <li class="bold"><a href="#!" class="">First Sidebar Link</a></li>
      <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>

希望有帮助！

【讨论】：

问题出在版本如果 jquery 现在我使用 CDN 链接它正在工作。谢谢