Материализация CSS Сиденав JQuery Не функционирует

Question

Я пытаюсь реализовать адаптивную панель навигации, которую обеспечивает Materialise CSS. У меня проблемы с реализацией функции JQuery. Я не уверен, почему, но JQuery, используемый для реализации этой функции, не работает.

Я сделал мою проблему воспроизводимой здесь .

The JQuery:

 $(document).ready(() => {
  $('.sidenav').sidenav();
 });

HTML:

<div class="home_container">
<nav class="nav-wrapper">
    <div class="container">

        <a href="#" class="sidenav-toggle" data-target="testSidenav"><i class="material-icons">menu</i></a>
    </div>
    <ul class="left hide-on-med-and-down">
        <li>Registered Bikes</li>
        <li>Investigations</li>
        <li>Reports</li>
        <li>Vulnerability Map</li>
    </ul>
</nav>

<ul class="sidenav" id="testSidenav">
    <li>Registered Bikes</li>
    <li>Investigations</li>
    <li>Reports</li>
    <li>Vulnerability Map</li>
</ul>

<div name="content" class="row s12">
</div>

Приветствия.

Answer 1

В вашем коде две ошибки:

1. sidenav-toggle не является допустимым именем класса. Правильное имя класса: sidenav-trigger

2. Все навигационные библиотеки (включая sidenav) должны иметь вложенный тег привязки, чтобы получить правильный интервал:

<ul class="left hide-on-med-and-down">
  <li><a href="#!">Registered Bikes</a></li>
  <li><a href="#!">Investigations</a></li>
  <li><a href="#!">Reports</a></li>
  <li><a href="#!">Vulnerability Map</a></li>
</ul>

Исправлен код ручки здесь.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="home_container">
    <nav class="nav-wrapper">
        <div class="container">

            <a href="#" class="sidenav-trigger" data-target="testSidenav"><i class="material-icons">menu</i></a>
        </div>
        <ul class="left hide-on-med-and-down">
            <li><a href="#!">Registered Bikes</a></li>
            <li><a href="#!">Investigations</a></li>
            <li><a href="#!">Reports</a></li>
            <li><a href="#!">Vulnerability Map</a></li>
        </ul>
    </nav>

    <ul class="sidenav" id="testSidenav">
        <li><a href="#!">Registered Bikes</a></li>
        <li><a href="#!">Investigations</a></li>
        <li><a href="#!">Reports</a></li>
        <li><a href="#!">Vulnerability Map</a></li>
    </ul>

    <div name="content" class="row s12">
    </div>
</div>

Всегда используйте разметку из документации .

Answer 2

Удалите первый тег <ul> и измените класс тега привязки <a> на .sidenav-trigger

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="home_container">
    <nav class="nav-wrapper">
        <div class="container">

            <a href="#" class="sidenav-trigger" data-target="testSidenav"><i class="material-icons">menu</i></a>

        </div>
    </nav>


    <ul class="sidenav" id="testSidenav">
        <li>Registered Bikes</li>
        <li>Investigations</li>
        <li>Reports</li>
        <li>Vulnerability Map</li>
    </ul>

    <div name="content" class="row s12">
    </div>
</div>

, если вы хотите протестировать его на разных экранах, используйте элемент проверки браузеров для изменения экранов