个人中心
gpt4 book ai didi

JavaScript 在 Materialize CSS 中不起作用

转载 作者：太空宇宙 更新时间：2023-11-04 07:16:50 25 4
gpt4 key购买 nike

我最近一直在尝试使用 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>

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

这是我运行这段代码时得到的图片: enter image description here

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

最佳答案

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

 

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

关于JavaScript 在 Materialize CSS 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50654225/

25 4 0
文章推荐： java - 如何验证 ScheduledExecutorService 已启动？
文章推荐： java - 如何从Java库调用程序启动的方法？
文章推荐： java - 如何从此字符串中随机生成五个选择？
文章推荐： java - Mongodb异常字符串索引超出范围: -1
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com