Materialize CSS 侧边栏 'options' 未定义。

Question

我使用了以下代码来创建在materializecss网站上找到的导航栏。

<nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
</nav>

<ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
</ul>

文档中指示使用以下 JavaScript 代码来初始化插件。

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

但是，在运行时它会显示：

未定义“options”。

我不想使用jQuery来实现这个目的。我该怎么解决？

- Sagar Bahadur Tamang

---

init方法的参数是什么？ - Aravind S

@AravindS 我不知道。我只是从materializecss网站上复制了代码。 - Sagar Bahadur Tamang

在这里查看选项的文档，https://materializecss.com/sidenav.html#options - Aravind S

@AravindS 非常感谢。 - Sagar Bahadur Tamang

Answer 1

因为你的JS代码中不存在options变量。相反，使用{}作为默认选项，如下所示：

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.sidenav');
  var instances = M.Sidenav.init(elems, {});
});

如果您确实想要更改任何默认设置，它们在此处文档中有记录：

{
    edge: 'left',
    draggable: true,
    inDuration: 250,
    outDuration: 200,
    onOpenStart: null,
    onOpenEnd: null,
    onCloseStart: null,
    onCloseEnd: null,
    preventScrolling: true
}

- wscourge

---

非常感谢，它起作用了。我应该更好地阅读文档。 - Sagar Bahadur Tamang

非常荣幸。不用担心，这是他们的失误，他们不应该在文档中添加任何无效代码。我也很抱歉让你感到困扰。 - wscourge