单击后响应式菜单 Materialize 不会折叠

Question

如果你能帮助我在点击移动设备时使菜单正常运行，sidenav 可以工作但在点击 link 时不会消失。它保持打开覆盖加载页面的覆盖。

我粘贴代码，它可能很乱（我知道），但我没有准备好，我只是做了一些尝试（对不起我的英语，我是意大利人）。

<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
 
  
   <script src=js/jquery.js type="text/javascript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>

         
   <script>       
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });      
         
            
$( document ).ready(function(){
$('.sidenav').sideNav({
      closeOnClick: true
    }
  );
});

   </script>
  

         <script>
 (function($){
  $(function(){

    $('.sidenav').sideNav();

  }); // end of document ready
})(jQuery); // end of jQuery name space

<!--Fixed Navbar -->
  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper white">
        <a href="#" class="brand-logo">xxxx</a>
 <a href="#" class="sidenav-trigger" data-target="mobile-nav" ><i class="material-icons">menu</i></a>
        
    <ul class="right hide-on-med-and-down">
          <li><a href="#servizio">Prezzi</a></li>
           <li><a href="#preventivi">Cosa posso fare per te</a></li>
          
        </ul>

  
      </div>
    </nav>
 
   
 </div>
        
  <ul class="sidenav" id="mobile-nav">

   <li><a href="#servizio">Prezzi</a></li>
          <li><a href="#">Cosa posso fare per te</a></li>
  </ul>

image of the menu on mobile

Answer 1

将 class .sidenav-close 添加到 sidenav 内的元素，该元素上的任何单击事件都会导致 sidenav 关闭。查看文档了解更多功能。

<nav>
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger">
            <i class="material-icons">menu</i>
        </a>
        <ul class="right hide-on-med-and-down">
            <li>
                <a href="#1">Sass</a>
            </li>
            <li>
                <a href="#2">Components</a>
            </li>
            <li>
                <a href="#3">Javascript</a>
            </li>
            <li>
                <a href="#4">Mobile</a>
            </li>
        </ul>
    </div>
</nav>

<ul class="sidenav" id="mobile-demo">
    <li>
        <a class="sidenav-close" href="#1">Sass</a>
    </li>
    <li>
        <a class="sidenav-close" href="#2">Components</a>
    </li>
    <li>
        <a class="sidenav-close" href="#3">Javascript</a>
    </li>
    <li>
        <a class="sidenav-close" href="#4">Mobile</a>
    </li>
</ul>
<script>
$(document).ready(function () {
    $('.sidenav').sidenav();
});
</script>

Sidenav - Materialize

单击后响应式菜单 Materialize 不会折叠

Responsive menu Materialize doesn't collapse after clicking

html

javascript

jquery

materialize

responsive