TypeError:$(...).sideNav不是函数

Question

我正在尝试使用Materialize主题在JSF中创建一个侧边栏Spring.我进口Materialise公司的js和css,但它出来一个错误TypeError: $(...).sideNav is not a function.我不知道为什么,我尝试了一个普通的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>

menuTemplate.xhtml尝试制作边栏的JSF文件.

<ui:composition>

<ul id="slide-out" class="side-nav">
   <li><div class="userView">
      <div class="background">
        <img src="../img/EN_logo.jpg"/>
      </div>
        <a href="#!user"><img class="circle" src="../img/EN_logo.jpg"/></a>
        <a href="#!name"><span class="white-text name">John Doe</span></a>
        <a href="#!email"><span class="white-text 
                                 email">jdandturk@gmail.com</span></a>
       </div></li>
   <li><a href="#!"><i class="material-icons">cloud</i>First Link With I 
     con</a></li>
    <li><a href="#!">Second Link</a></li>
   <li><div class="divider"></div></li>
   <li><a class="subheader">Subheader</a></li>
   <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
 </ul>
      <a href="#" data-activates="slide-out" class="button-collapse">menu</a>
 </ui:composition>

错误消息:

Answer 1

您的代码中有2个问题:

1: MaterialiseCSS与jQuery 3不兼容,所以你必须使用一些旧版本的JQuery.试试2.xx:

<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

Answer 2

Materialize与jQuery3兼容。您只需要先加载jQuery，然后再加载materialize.min.js。

Answer 3

要使 .sideNav() 工作，MaterializeCSS v1.0.0与 jQuery v3 或 v2不兼容，因此您必须使用旧版本的 MaterializeCSS。尝试 0.xx：它对我有用！

例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>