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>

image of the menu on mobile

Answer 1

将类.sidenav-close添加到sidenav内的元素，该元素上的任何click事件都将导致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不会折叠

1 个答案: