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

Question

please if you can help me to make the menu functioning when clicking on mobile, sidenav works but not disappearing when clicking on a link. It remains open the overlay covering the page loaded.

I paste the code, it could be messy (i know), but not prepared, and I've just made some attempts (sorry for my English, I'm Italian).

 <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

Add the class .sidenav-close to an element inside the sidenav and any click event on that element will cause the sidenav to close. Check Documentation for more functions.

<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