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>

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

任何帮助都将非常感谢我现在花了几天时间......

Answer 1

为了让您的示例正常运行，我在列表的开头添加了一个缺失的<ul id="slide-out" class="side-nav">。

＆＃13;

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

＆＃13;

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

＆＃13;

实现CSS sideNav closeOnClick不起作用

1 个答案: