JavaScript 在 Materialise CSS 中不起作用答案

【问题标题】：JavaScript isn't working in Materialize CSSJavaScript 在 Materialise CSS 中不起作用
【发布时间】：2018-11-12 05:35:55
【问题描述】：

我最近一直在玩 Materialize-css，试图习惯于构建网站。但是，我注意到当我尝试添加 JavaScript 功能时，它似乎不起作用。我已经仔细检查以确保我拥有所有正确的文件夹 - js、css 和字体，以及正确的脚本加载。这是我的 jQuery 和 index.html 文件的示例：

    $('.parallax').parallax();
$('.dropdown-trigger').dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
  <html>
  <head>
    <title>Title</title>
    <!--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>
    
    

    <ul id="dropdown1" class="dropdown-content">
      <li><a href="#!">macOS</a></li>
      <li><a href="#!">iOS</a></li>
      <li class="divider"></li>
      <li><a href="#!">Android</a></li>
    </ul>


    <!--<div class="navbar-fixed">-->
      
      <nav>
        <div class="nav-wrapper" style="background-color: #323643;">
          <a href="#" class="brand-logo"> Logo</a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">Home</a></li>
            <li><a href="badges.html">About</a></li>
            <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
          </ul>
        </div>
        

      </nav>
      <!--</div>-->

      <div class="parallax-container">
        <div class="parallax"><img src="images/oneway.jpg"></div>
      </div>
      <div class="section white">
        <div class="row container">
          <h2 class="header">Parallax</h2>
          <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
        </div>
      </div>
      <div class="parallax-container">
        <div class="parallax"><img src="images/oneway.jpg"></div>
      </div>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
      
    </body>
    </html>

如您所见，我正在尝试向我的网站添加视差和下拉菜单按钮。为了做到这一点，我被指示在 $ 中添加 jQuery '$('.parallax').parallax();' 和(document).ready(function()) 在 materialize.js 文件中。请参阅此处的文档：https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html。

这是我运行此代码时得到的图片：

当我单击“下载”下拉按钮时，它应该显示一、二、三等，并且应该有一个使用视差的背景图像。有人注意到我遗漏了什么吗？

【问题讨论】：

您的 HTML 无效。您不能在head 或body 之外放置任何标签。

标签： javascript jquery html css materialize

【解决方案1】：

我认为你的图书馆放置是错误的。请检查以下更改。现在我没有收到任何错误

 

 $(document).ready(function(){
        $('.parallax').parallax();
    $('.dropdown-trigger').dropdown();
  });

    
    <!DOCTYPE html>
      <html>
      <head>
        <title>Title</title>
        <!--Import Google Icon Font-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

         <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js'></script>
        <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>
        
        

        <ul id="dropdown1" class="dropdown-content">
          <li><a href="#!">macOS</a></li>
          <li><a href="#!">iOS</a></li>
          <li class="divider"></li>
          <li><a href="#!">Android</a></li>
        </ul>


        <!--<div class="navbar-fixed">-->
          
          <nav>
            <div class="nav-wrapper" style="background-color: #323643;">
              <a href="#" class="brand-logo"> Logo</a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="sass.html">Home</a></li>
                <li><a href="badges.html">About</a></li>
                <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
              </ul>
            </div>
            

          </nav>
          <!--</div>-->

          <div class="parallax-container">enter code here
            <div class="parallax"><img src="images/oneway.jpg"></div>
          </div>
          <div class="section white">
            <div class="row container">
              <h2 class="header">Parallax</h2>
              <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
            </div>
          </div>
          <div class="parallax-container">
            <div class="parallax"><img src="images/oneway.jpg"></div>
          </div>

          
        </body>
        </html>

【讨论】：

【解决方案2】：

我想通了。

显然 JQuery 应该被添加到这个函数中：

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

    $('.sidenav').sidenav();
    $('.parallax').parallax();

  }); // end of document ready
})(jQuery);

【讨论】：