Materialize CSS sideNav closeOnClickが動作しない

Question

1ページのサイトでMaterialize CSSを使用しています。

sideNavのリンクをクリックしたときにsideNavを閉じることができません。私は何か

が欠落しなければならないので、私は私がinit.jsファイルを参照していますこれは私の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> 

である私は、この

$(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 
     } 
    ); 

}); 

でsidenavを初期化していますjqueryのにかなり新しいです私のindex.html 他のすべてのものが動作しています 私はメインファイルに入っていて、デフォルトをcloseOnClick：trueに変更しましたが、それでもクリックでは閉じません。

すべてのヘルプは大幅に私はあなたの例の作業を行うには、この今.....

Answer 1

に日々を過ごしていいただければ幸い、私は不足している追加：あなたのリストの先頭に<ul id="slide-out" class="side-nav">を。 SO

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