css - 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 类，我可以看到菜单，但点击它不会触发 side-nav

Here是我的 jsFiddle

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

如何让侧边导航在移动设备和桌面设备上工作

Answer 1

button-collapse 类在 CSS 中设置了 display:none，因为桌面版如下:

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

不确定原因。

但是您可以使用 button-collapse 以外的其他类，它会起作用。

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/