Question

我使用带有导航栏的侧边栏，只显示汉堡包按钮（移动时）和刷新按钮。它做得很好，但当你点击汉堡包图标时没有任何反应！侧边栏不会打开。我该如何解决这个问题？

这是我的代码（重要的事情）：

<div class="navbar-fixed">
    <nav class="navbar blue">
        <div class="nav-wrapper">
            <ul class="right hide-on-med-and-down">
                <li><a onClick="window.location.reload()"><i class="material-
    icons">refresh</i></a></li>
            </ul>

            <a href="#" data-target="slide-out" class="sidenav-trigger"><i 
    class="material-icons">menu</i></a>
        </div>
    </nav>
</div>

<ul id="slide-out" class="sidenav sidenav-fixed">
    ...
</ul>

是的，我确实拥有Materialize CSS和JS，以及jQuery版本2.1.1。

Answer 1

请参阅this fiddle了解有效的解决方案以及如何导入所需的js。

代码：

<head>
    <title></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    <script>
      <!-- this part is important! -->
      $(document).ready(function () {
        $(".button-collapse").sideNav();
      });
    </script>
</head>
<body>
   <div class="navbar-fixed">
      <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="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
            </ul>
         </div>
      </nav>
   </div>
   <ul class="side-nav" id="mobile-demo">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
  </ul>
</body>

请记住在document.ready（）函数中初始化sideNav！

这应该可以解决问题。

Answer 2

在index.html文件而不是app.component.html文件中添加以上代码。

Answer 3

取出固定的类，如果要固定菜单，请在CSS中执行。该类菜单无法正常工作

为什么我的Materialize sidenav汉堡包菜单不起作用？

3 个答案: