javascript - Materialise 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"