物化CSS sideNav closeOnClick 不起作用

Question

我在单页网站上使用 Materialize 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>

我在 index.html 中引用了 init.js 文件 所有其他实现的东西都在工作 我什至已经进入主文件并将默认值更改为 closeOnClick: true 但它仍然不会在单击时关闭。

任何帮助将不胜感激，我现在​​已经花了几天时间......

Answer 1

为了使您的示例有效，我在您的列表开头添加了一个缺失的：<ul id="slide-out" class="side-nav">。

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