Materialise sidenav не появляется

Я пытаюсь изучить материализацию, но не могу отобразить боковую навигацию, когда я нажимаю кнопку меню. Я думаю, это как-то связано с инициализаторами.

    <body>
  <nav>
    <div class = "nav-wrapper">
      <a href = "#!" class = "brand-logo">Logo</a>
      <a href = "#" data-target = "mobile-demo" class = "sidenav-trigger"><i class = "material-icons">menu</i></a>
      <ul class = "right hide-on-med-and-down">
        <li><a href = "sass.html">Sass</a></li>
        <li><a href = "badges.html">Components</a></li>
        <li><a href = "collapsible.html">Javascript</a></li>
        <li><a href = "mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

  <ul class = "sidenav" id = "mobile-demo">
    <li><a href = "sass.html">Sass</a></li>
    <li><a href = "badges.html">Components</a></li>
    <li><a href = "collapsible.html">Javascript</a></li>
    <li><a href = "mobile.html">Mobile</a></li>
  </ul>

Теги скрипта внизу тела html:

      <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.100.2/js/materialize.min.js"></script>
  <script>
  $(document).ready(function(){
    $('.sidenav').sidenav();
  });
  </script>

Ваша функция sidenav () не определена

— 14.06.2018 21:39

javascript html css materialize

14.06.2018 21:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

303

Ответы 2

Функция sidenav() не определена. Вы должны попробовать это вместо этого

<script>
  $(document).ready(function(){
    $('.sidenav-trigger').click(function(){
      $('#mobile-demo').removeClass("sidenav");
    });

  });
  </script>

Это отображало содержимое под значком меню, но без предполагаемого стиля или анимации.

— 14.06.2018 22:21

14.06.2018 21:54

Он не инициализировал M, глобальный объект для Materialise. Я изменил версию Materialize из CDN и запустил ее. В итоге мне не понадобился jQuery.

<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script>
  const sideNav = document.querySelector('.sidenav');
  M.Sidenav.init(sideNav, {});
</script>

20.06.2018 22:26

Другие вопросы по теме

Строка таблицы отображается за пределами родительской таблицы

Как разместить таблицу на странице, не влияя на другой элемент?

Как изменить класс тега body на базовой странице jsp из включенного jsp

Я не могу нажать значение кодировки utf8 (if-else) в php

Использование JQuery Datepicker (элементы с повторяющимися идентификаторами)

Скелетный веб-сайт, который будет анализировать внешний файл и отображать его в HTML

Прокрутите div внутри div?

Использование данных, возвращенных из [matDatepicker] Angular Material, для добавления к вызову POST

Как сделать гибкое выпадающее меню

Переменные Flask не отображаются в HTML

Materialise sidenav не появляется

Ответы 2

Другие вопросы по теме

Похожие вопросы