Адаптивное меню Materialize не разрушается после нажатия

Question

пожалуйста, если вы можете помочь мне сделать функционирование меню при нажатии на мобильный телефон, sidenav работает, но не исчезает при нажатии на ссылку. Осталось открыть оверлей, покрывающий загруженную страницу.

Я вставляю код, он может быть грязным (я знаю), но не подготовлен, и я только что сделал несколько попыток (извините за мой английский, я итальянский).

<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>


	  

изображение меню на мобильном телефоне

Answer 1

Добавьте класс .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 - Материализация