web-dev-qa-db-ja.com

マテリアライズCSSサイドナビゲーションの「オプション」が定義されていません

Materializecss WebサイトにあるNavBarに次のコードを使用しました。

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

しかし、実行するとそれは言う

「オプション」は定義されていません。

この目的でjQueryを使用したくありません。どうすれば修正できますか？

javascripthtmlcssmaterialize
13
Sagar Bahadur Tamang

あなたのjsコードにはoptions変数がないからです。代わりに、{}以下のようなデフォルトのオプション：

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

デフォルトを変更したい場合は、文書化されています here ：

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