javascript - Material Design 中不显示移动菜单

Question

我正在使用 MaterializeCss，我有一个默认菜单和移动菜单，遵循 their website 中的示例.当屏幕变小时，顶部的菜单行应该消失，网站只需要显示移动版菜单栏。

这是行不通的。当我单击时，我看不到任何行为，也看不到任何消息。组件和尺寸之间的链接已设置。感觉很困惑如何排除故障。

看看这个不工作的 fiddle .

<a href="#" data-activates="mobile-demo" class="right button-collapse">
  <i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="application left hide-on-med-and-down">
  <li><a id="home-menu" href="#">START</a></li>
  <li><a id="uno-menu" href="#">BEEP</a></li>
  <li><a id="duo-menu" href="#">BLOPP</a></li>
  <li><a id="tres-menu" href="#">POPP</a></li>
</ul>
<ul id="mobile-demo" class="application side-nav">
  <li><a id="home-mob-menu" href="#vinn">START mob</a></li>
  <li><a id="uno-mob-menu" href="#vinn">BEEP mob</a></li>
  <li><a id="duo-mob-menu" href="#krita">BLOPP mob</a></li>
  <li><a id="donkey-mob-menu" href="#demos">SNOPP mob</a></li>
  <li><a id="monkey-mob-menu" href="#misc">ROPP mob</a></li>
</ul>

Answer 1

您是否尝试过文档移动部分中描述的示例:

http://materializecss.com/side-nav.html#options

这是我的尝试:

<nav>
  <div class="nav-wrapper blue-grey darken-3">
    <a href="#" class="brand-logo">SPA</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="#main/interesting-section">Interesting</a></li>
      <li><a href="#details">Details</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="#">Home</a></li>
      <li><a href="#main/interesting-section">Interesting</a></li>
      <li><a href="#details">Details</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
</nav>

它需要以下 javascript 来初始化:

$(function() {
  $(".button-collapse").sideNav();
})

CodePen