Javascript Materialise 的组件不工作

Question

我想使用 Materialise Framework 但我无法使用它的 JAVASCRIPT 组件，waves-button 工作但其余的都不起作用，我在 Net 上搜索并找到第一个调用 jquery 在 Materialise 之前，但这并没有解决我的问题..

这是我的 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，但它不起作用。

Answer 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 冲突的框架？你能在你的问题中转储控制台输出吗？

Answer 2

这里有一个 fiddle，它将引导您了解导航栏的基本结构，并在汉堡包图标的切换按钮上有一个滑出按钮。我用过 jQuery 2.2.0 和 Materialise 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>

希望对您有所帮助！

Javascript Materialise 的组件不工作

Javascript Component not working of Materialize

html

javascript

css

jquery

materialize