Javascript TypeError:$（…）。sideNav不是函数_Javascript_Materialize

Javascript TypeError:$（…）。sideNav不是函数

javascript

Javascript TypeError:$（…）。sideNav不是函数,javascript,materialize,Javascript,Materialize,我试图使用Materialize主题在JSF中使用Spring制作一个侧栏。我导入了Materialize的js和css，但结果是出现了一个错误TypeError:$（…）。sideNav不是一个函数。我不知道为什么，我试着在一个普通的HTML文件，它的工作我得到这个错误的原因是什么？如何修复它页面结构： <h:head> <title><h:outputText value="#{msg.title}" /></title> <

我试图使用Materialize主题在JSF中使用

Spring

制作一个侧栏。我导入了Materialize的

js

和

css

，但结果是出现了一个错误

TypeError:$（…）。sideNav不是一个函数

。我不知道为什么，我试着在一个普通的HTML文件，它的工作

我得到这个错误的原因是什么？如何修复它

页面结构：

<h:head>
<title><h:outputText value="#{msg.title}" /></title>

   <!-- Import Materialize css -->
 <link rel="stylesheet" href="./themes/materialize/css/materialize.min.css"/>

 <!-- Compiled and minified JavaScript -->
 <script src="./themes/materialize/js/materialize.min.js"></script>
<script src="./themes/materialize/js/materialize.js"></script>
 <!--Import jQuery before materialize.js-->
 <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script>


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

      $('.button-collapse').sideNav('show');

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

</h:head>

  <h:body onload="init();">


<!--<table id="Table_01" class="Table_01">-->
<table id="WholeFunctionPageLayoutTable" cellspacing="0px" cellpadding="0px" width="100%"
        border="0px">

        <tr id="WholeFunctionPageWidthSpacer" >



            <td>
            <!--<table class="Table_SASC_03">-->
                <table cellspacing="0px" cellpadding="0px" style="margin-left:0px; padding-left:0px;" border="0px">
                    <tr valign="top">
                        <td>
                            <ui:include src="MenuTemplate.xhtml" />
                        </td>
                    </tr>                                                                       
                </table>
            </td>
            <!-- End Page Left Menu Navigation Section -->

        </tr>

 </table>
 </h:body>

</html>

错误消息：

您的代码中有两个问题：

1:MaterializeCSS与jQuery 3不兼容，因此您必须使用一些较旧版本的jQuery。试试2.x.x：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

2:在您的评论中，在导入脚本的地方，明确提到要在Materialize.js之前导入jQuery

<!--Import jQuery before materialize.js-->

之后您仍在导入它。因此，切换这些行，在materialize.js之前导入jQuery

我也遇到了同样的问题。这就是我想出的解决办法

setTimeout(function (){
  $('.button-collapse').sideNav('show');
},1000)

问题是您在呈现jQuery元素之前正在访问它。请稍等。

更新：2017年10月：

物化v0.100.2

可与jQuery

v3.2.1

配合使用，前提是您需要将它们按正确的顺序排列：

下面的代码片段取自MaterializeCSS站点：

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

Materialize与jQuery3兼容。您只需在加载materialize.min.js之前先加载jQuery。

要使.sideNav（）正常工作，Materialiecsv1.0.0与jQuery v3或v2不兼容，因此必须使用旧版本的Materialiecss试试0.x.x：它对我有用
例如：

我遇到了同样的问题。这是因为jQuery必须在Materialize.min.js文件之前加载。一旦我改变了顺序，一切都很顺利。只要顺序正确，使用jQuery3就可以做到这一点

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

如上所述，装载顺序很重要。JQuery 3.3.1与Materialize 1.0.0配合使用：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

.sideNav（）已被重命名。在v1.0.0中，sideNav（）请参见
我不知道在发表此评论时它是否为真。但是materialize 1.0.0现在在jQuery 3.4.1中完美运行，解决方案是首先加载jQuery。好主意，使用
setTimeout
，但有时会失败。您可以调用文档本身或此元素的父/容器元素的.ready事件
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>