MaterializeCSS - события SideNav не запускаются должным образом

У меня есть базовая html-страница с навигационной панелью (Документация по Navbar) и складной боковой навигацией (Документация SideNav). Сама боковая навигация работает нормально, но события «onOpenStart» и «onEndClose» срабатывают, как только страница загружается, а не когда боковая навигация открывается / закрывается.
Я предполагаю, что альтернативой было бы перехватить некоторые события на sidenav-trigger и перейти оттуда, но это кажется совершенно ненужным, если эти события уже существуют.

JsFiddle: https://jsfiddle.net/gvgo2Lu2/2/
Любая помощь будет оценена

HTML

<head>
  <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0"/>
</head>
<body>
  <nav>
    <div class = "nav-wrapper">
      <div class = "row">
        <div class = "col s12">
          <a href = "#!" class = "brand-logo">Logo</a>
          <a href = "#" data-target = "mobile-nav" class = "sidenav-trigger">
            <i id = "test" class = "material-icons">menu</i>
          </a>
          <ul class = "right hide-on-med-and-down">
            <li>
              <a href = "#!">Link</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>

  <!-- MOBILE NAV -->
  <ul class = "sidenav" id = "mobile-nav">
    <li>
      <a href = "#!">Link</a>
    </li>
  </ul>
</body>

var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
  onOpenStart: console.info("I trigger as soon as the page is loaded"),
  onCloseEnd: console.info("same")
});

javascript html materialize sidenav

10.04.2018 16:43

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

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

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

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

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

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

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

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

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

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

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

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

3 655

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Согласно документации, событиям onOpenStart и onCloseEnd требуется функция обратного вызова. Но вы используете результат вычисления: console.info (....). Поскольку это значение не определено, вы не добавляете обработчики событий!

Чтобы решить эту проблему, вам необходимо изменить свой init на (обновленный рабочий пример):

var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem, {
    onOpenStart: function () {
        console.info("I trigger as soon as the page is loaded");
    },
    onCloseEnd: function () {
        console.info("same");
    }
});

<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>


<nav>
    <div class = "nav-wrapper">
        <div class = "row">
            <div class = "col s12">
                <a href = "#!" class = "brand-logo">Logo</a>
                <a href = "#!" data-target = "mobile-nav" class = "sidenav-trigger">
                    <i class = "material-icons">menu</i>
                </a>
                <ul class = "right hide-on-med-and-down">
                    <li>
                        <a href = "#!">Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

<!-- MOBILE NAV -->
<ul class = "sidenav" id = "mobile-nav">
    <li>
        <a href = "#!">Link</a>
    </li>
</ul>

10.04.2018 16:59

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

Комментарий Laravel Blade перед "@if"

Несколько языков через сеанс, два каталога

Обнаружение программного обеспечения, установленного с веб-сайта

Настройка изображения профиля по умолчанию в PHP

Получить входные значения формы, скрытой в JQuery, с помощью PHP

Учет разницы в размере символов

Попытка переместить изображение ниже по странице

Математическое представление в html

Подключение продолжает сбрасываться при попытке загрузить файл на сервер Tomcat

В Outlook 2007 пробел между условными комментариями

MaterializeCSS - события SideNav не запускаются должным образом

Ответы 1

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

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