Question

我正在尝试使用Materialize主题在JSF中使用Spring创建侧边栏。我导入了Materialise＆＃39; 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>

尝试制作边栏的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>

错误消息：

Answer 1

您的代码中存在两个问题：

1： MaterialiseCSS与jQuery 3不兼容，所以你必须使用一些旧版本的JQuery。试试2.x.x：

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

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

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

然后你仍在进口它。所以切换这些行，在materialize.js之前导入jQuery

Answer 2

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

Answer 3

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

例如：

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

Answer 4

.sideNav（）在v1.0.0中已重命名为.sidenav（），请参见https://materializecss.com/sidenav.html

Answer 5

更新：2017年10月： Materialize v0.100.2适用于jQuery v3.2.1，前提是您需要按正确顺序排列：

下面的代码段取自MaterialiseCSS网站：

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

Answer 6

我遇到了同样的问题。是，因为必须在Materialize.min.js文件之前加载jQuery。切换订单后，一切正常。只要顺序正确，使用jQuery 3都可以。

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

Answer 7

如上所述，加载顺序很重要。 JQuery 3.3.1与Materialize 1.0.0一起使用：

most_similar()

Answer 8

我遇到了同样的问题。这是我提出的解决方案。

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

问题是您在呈现之前访问jQuery元素。等一下。

TypeError：$（...）。sideNav不是函数

8 个答案: