JavaScript не работает в материализации CSS - PullRequest
Новая
       6

JavaScript не работает в материализации CSS

0 голосов
/ 02 июня 2018

Я недавно играл с Materialise-css, пытаясь привыкнуть к созданию сайтов.Однако я заметил, что когда я пытаюсь добавить функции JavaScript, это, похоже, не работает.Я дважды проверил, чтобы убедиться, что у меня есть все нужные папки - js, css, & fonts, а также правильная загрузка скриптов.Вот пример моего файла 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 ();' и '$ ('. Dropdown-trigger '). Dropdown ();' в $.(document) .ready (function ()) в файле materialize.js.См. Документацию здесь: https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html.

Вот изображение того, что я получаю, когда запускаю этот код: enter image description here

Когда я щелкаю по нему, в раскрывающемся списке «Загрузки» должны отображаться один, два, три и т. Д., И должно быть фоновое изображение с использованием параллакса.Кто-нибудь замечает что-то, чего мне не хватает?

Ответы [ 2 ]

0 голосов
/ 02 июня 2018

Я думаю, что ваша библиотека размещена неправильно.Пожалуйста, проверьте это с изменениями ниже.Теперь я не получаю никакой ошибки 

 

 $(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>
0 голосов
/ 02 июня 2018

Я понял это.

Очевидно, что JQuery должен быть добавлен к этой функции: 

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

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

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