Question

我希望能够在小屏幕上单击触发按钮时关闭sidenav。我正在使用物化1.00和Jquery 3.3.1。现在我只能在外面单击以将其关闭

这是我的HTML

<nav class="nav-wrapper">
  <a href="#" data-target="nav-mobile" class="top-nav sidenav-trigger 
    waves-effect waves-light circle hide-on-large-only">
   <i class="material-icons">menu</i>
 </a>
</nav>

....

这是我的js的一部分：

$(document).ready(function () {
  $('.sidenav').sidenav();
});

非常感谢您的帮助。

Answer 1

$('.button-collapse').sideNav({
      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<nav class="red lighten-1" role="navigation">
  <div class="nav-wrapper container">

    <ul class="right hide-on-med-and-down">
      <li><a href="#">Navbar Link</a></li>
    </ul>

    <ul id="nav-mobile" class="side-nav" style="transform: translateX(-100%);">
      <li><a href="#">Navbar Link</a></li>
    </ul>
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav>

如何在实现按钮上显示/隐藏触发按钮上的sidenav

1 个答案: