Javascript组件无法实现Materialize

Question

我想使用Materialize Framework，但无法使用其JAVASCRIPT组件，waves按钮有效，但其余所有按钮均不起作用，我在Net上搜索并发现在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，但它不起作用。

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

这是一个小提琴，它将引导您浏览导航栏的基本结构，并在汉堡图标的拨动按钮上进行滑出。 我已经使用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>

希望有帮助！

Javascript组件无法实现Materialize

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-06-20 14:10:20

解决方案2
0 2016-06-20 14:26:49

Javascript组件无法实现Materialize

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-06-20 14:10:20

解决方案2 0 2016-06-20 14:26:49

解决方案1
0 已采纳 2016-06-20 14:10:20

解决方案2
0 2016-06-20 14:26:49