MaterializeCSS Sidenav JQuery不工作

Question

我正在尝试实现响应导航栏，实现CSS提供的物化。我在实现这个特性的JQuery方面遇到了困难。我不知道为什么，但是用于实现该功能的JQuery不能正常工作。

我已经把我的问题复制了这里。

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

您的代码有两处问题：

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>

如果要在不同的屏幕上测试它，请使用“浏览器检查”元素更改屏幕。