具体化 CSS 侧导航关闭单击不起作用

Question

我在单页网站上使用Materialize css。

当单击侧导航中的链接时，我无法关闭侧导航。 我对jquery相当陌生，所以我一定错过了一些东西

我正在用这个初始化侧导航

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

这是我的网页

            <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 文件.html所有其他物化的东西都在工作我什至进入了主文件并将默认值更改为关闭OnClick：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>