实现CSS框架汉堡包菜单不起作用

Question

我试图获取在物化网站上运行的移动菜单的汉堡按钮，并且我已经按照文档进行操作，但出于某些原因，当我点击按钮时会发生这种情况：

但是，当我全屏显示时，我可以清楚地看到菜单，就像这样。

任何人都知道问题是什么？这是我正在使用的代码：

<nav>
    <div class="nav-wrapper">
        <a href="" class="brand-logo">logo</a>
        <a href="" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
            <li><a href="">home</a></li>
<li><a href="">About</a></li>
<li><a href="">services</a></li>
<ul class="side-nav" id="mobile-demo">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
</ul>
        </ul>
    </div>
</nav>

另外，我已经在下面的脚本中初始化了JavaScript，并且它最后加载了。

<script>    
    $(".button-collapse").sideNav();
</script> 

Answer 1

我之前项目的摘录

<!-- Navbar START-->
<nav>
  <div class="nav-wrapper bg__secondary">
     <a href="" class="brand-logo">logo</a>

    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#">Login</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="#">Home</a></li>
      <li><a href="#">Contact Us</a></li>
      <li><a href="#" class="waves-effect waves-light btn-large">Login</a></li>
    </ul>
  </div>
</nav>
<!-- Navbar END-->

我认为您忘记将$(".button-collapse").sideNav();包含在文档就绪函数

中

$(document).ready(function() {
  // REQUIRED FOR BUTTON COLLAPSE
  $(".button-collapse").sideNav();
}

我的material-css版本："materialize-css": "^0.100.2"，"jquery": "3.2.1"