MaterializeCSS 导航栏按钮不触发侧面导航

Question

我有以下侧边导航代码：

<ul id="slide-out" class="side-nav">
  <li><a class="subheader">Last Updated:</a></li>
  <li><a>Text Here</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Subheader</a></li>
  <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

我还有下面的头代码：

<header>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper blue darken-1">
                <a class="brand-logo center" href="#">Website Name</a>
  <ul class="right">
    <li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li>
  </ul>
            </div>
        </nav>
    </div>
</header>

为什么菜单项没有出现在我的导航栏中，为什么它没有触发侧边导航？

此外，如果我删除 button-collapse class，我可以看到菜单，但点击它不会触发 side-nav

Here 是我的 jsFiddle

编辑：我的问题不是图标，而是单击菜单 icon/text 不会激活侧面导航菜单的事实。

如何在移动设备和桌面设备上使用侧边导航

Answer 1

在你的 js 文件中添加这一行 $('.button-collapse').sideNav();

Answer 2

Class button-collapse 在 CSS 中设置 display:none 由于以下桌面版：

@media only screen and (min-width: 993px)
nav a.button-collapse {
    display: none;
}

不确定原因。

但是您可以使用 button-collapse 以外的 class 并且它会起作用。

HTML:

<header>
            <div class="navbar-fixed">
                <nav>
                    <div class="nav-wrapper blue darken-1">
                        <a class="brand-logo center" href="#">Website Name</a>
          <ul class="right">
            <li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li>
          </ul>
                    </div>
                </nav>
            </div>   
</header>

JS:

(function($){
  $(function(){

    $('.my-btn').sideNav({
      edge: 'left', // Choose the horizontal origin
      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
      draggable: true // Choose whether you can drag to open on touch screens
    }
    );

  }); // end of document ready
})(jQuery); // end of jQuery name space

Fiddle: https://jsfiddle.net/6hfrw33n/

Answer 3

If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .sidenav-trigger.

<header>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper blue darken-1">
                <a class="brand-logo center" href="#">Website Name</a>
  <ul class="right">
    <li><a data-activates="slide-out" class="button-collapse show-on-large" href="#"><i class="material-icons">menu</i></a></li>
  </ul>
            </div>
        </nav>
    </div>
</header>

如下所示：https://materializecss.com/sidenav.html

MaterializeCSS 导航栏按钮不触发侧面导航

MaterializeCSS Navbar button not triggering side nav

css

nav

materialize