MaterializeCSS Sidenav JQuery 不起作用答案

【问题标题】：MaterializeCSS Sidenav JQuery Not FunctioningMaterializeCSS Sidenav JQuery 不起作用
【发布时间】：2020-04-22 11:08:26
【问题描述】：

我正在尝试实现 Materialize CSS 提供的响应式导航栏。我在实现该功能的 JQuery 方面时遇到了麻烦。我不确定为什么，但用于实现该功能的 JQuery 不起作用。

我已经让我的问题可重现 here。

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>

干杯。

【问题讨论】：

标签： jquery materialize

【解决方案1】：

您的代码有两个问题：

1. sidenav-toggle 不是有效的类名。正确的类名是sidenav-trigger

2。所有的 nav li（包括 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>

修复了密码笔here.

<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>

始终使用来自documentation 的标记。

【讨论】：

【解决方案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>

如果你想在不同的屏幕上测试它，使用浏览器的检查元素来改变屏幕

【讨论】：