我正在尝试使用物化主题在JSF中用spring制作一个侧栏。 我导入了物化的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>

试图生成侧栏的JSF文件menutemplate.xhtml。

<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>

错误消息: