Materialize CSS sideNav closeOnClick funktioniert nicht

Question

Ich verwende Materialize CSS auf einer Seite.

Ich kann die SideNav nicht schließen, wenn die Links in der SideNav angeklickt werden. Ich bin ziemlich neu in Jquery, damit ich etwas

fehlen muss ich die sidenav mit diesem

$(document).ready(function(){ 
    $('.button-collapse').sideNav({ 
      menuWidth: 300, // Default is 300 
      edge: 'right', // Choose the horizontal origin 
      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor 
      draggable: true // Choose whether you can drag to open on touch screens 
     } 
    ); 

}); 

das ist mein html

  <ul class="side-nav" id="slide-out"> 
      <li><a class="welcome waves-effect waves-am-red" href="#welcome">Welcome</a></li> 
      <li><a class="about waves-effect waves-am-red" href="#about">About </a></li> 
      <li><a class="where waves-effect waves-am-red" href="#where">Where we work</a></li> 
      <li><a class="acheivements waves-effect waves-am-red" href="#acheivements">2016 Acheivements</a></li> 
      <li><a class="fundraising waves-effect waves-am-red" href="#fundraising">2016 fundraising</a></li> 
      <li><a class="potential waves-effect waves-am-red" href="#case-studies">Case studies</a></li> 
      <li><a class="financial waves-effect waves-am-red" href="#financial-highlights">highlights</a></li> 
      <li><a class="outlook waves-effect waves-am-red" href="#outlook">Outlook </a></li> 
     </ul> 
     <a href="#" data-activates="slide-out" class="button-collapse"> 
      <i class="material-icons">menu</i> 
     </a> 

Ich Referenzierung der Init.js Datei bin Initialisierung in meine index.html Alle anderen materialize Dinge arbeiten Ich habe sogar in die Hauptdatei und änderte den Standard zu CloseOnClick: True, aber es wird immer noch nicht auf Klick schließen.

Jede Hilfe wäre ich sehr Tage verbracht haben, auf das jetzt .....

Answer 1

geschätzt werden, um Ihr Beispiel Arbeit, habe ich eine fehlende zu machen: <ul id="slide-out" class="side-nav"> am Anfang der Liste.

$(document).ready(function() { 
 
    $('.button-collapse').sideNav({ 
 
    menuWidth: 300, // Default is 300 
 
    edge: 'right', // Choose the horizontal origin 
 
    closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor 
 
    draggable: true // Choose whether you can drag to open on touch screens 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> 
 

 
<!-- Compiled and minified JavaScript --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script> 
 

 
<ul id="slide-out" class="side-nav"> 
 
    <li><a class="welcome waves-effect waves-am-red" href="#welcome">Welcome</a></li> 
 
    <li><a class="about waves-effect waves-am-red" href="#about">About </a></li> 
 
    <li><a class="where waves-effect waves-am-red" href="#where">Where we work</a></li> 
 
    <li><a class="acheivements waves-effect waves-am-red" href="#acheivements">2016 Acheivements</a></li> 
 
    <li><a class="fundraising waves-effect waves-am-red" href="#fundraising">2016 fundraising</a></li> 
 
    <li><a class="potential waves-effect waves-am-red" href="#case-studies">Case studies</a></li> 
 
    <li><a class="financial waves-effect waves-am-red" href="#financial-highlights">highlights</a></li> 
 
    <li><a class="outlook waves-effect waves-am-red" href="#outlook">Outlook </a></li> 
 
</ul> 
 
<a href="#" data-activates="slide-out" class="button-collapse"> 
 
    <i class="material-icons">menu</i> 
 
</a>