實現CSS sideNav closeOnClick不工作

Question

我在一頁網站上使用Materialise css。

當sideNav中的鏈接被點擊時，我無法關閉sideNav。我是相當新的jQuery的，所以我必須失去了一些東西

我初始化的sidenav這個

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

}); 

這是我的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> 

我引用了init.js文件我的index.html 所有其他物化的東西都在工作 我甚至進入主文件並將默認值更改爲closeOnClick：true，但它仍然不會在點擊時關閉。在列表的開頭<ul id="slide-out" class="side-nav">：

任何幫助將不勝感激我現在已經對這個花了幾天.....

Answer 1

爲了使您的工作例如，我添加了一個失蹤。

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