Materialise sidenav 不适用于小型设备答案

【问题标题】：Materialize sidenav not working on small devicesMaterialise sidenav 不适用于小型设备
【发布时间】：2021-07-11 10:30:43
【问题描述】：

我在 Django 中使用 Materialise。 Navbar 在大屏幕上运行良好，但 sidenav 在小屏幕上无法运行。

 var elems = document.querySelectorAll('.sidenav');
 var sidenavInstance = M.Sidenav.init(elems);

 <a href="#" data-target="mobile-nav" class="sidenav-trigger "> <i class="material-icons">menu</i></a>
  <ul id="slide-out" class="sidenav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Academics</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
  </ul>

这是我的代码 sn-p。我在小屏幕上收到错误“无法读取 null 的属性‘M_Sidenav’”。谁能告诉我为什么会出现这个错误？

【问题讨论】：

你添加脚本了吗？

标签： javascript materialize

【解决方案1】：

确保您已链接 JavaScript，例如通过 CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

也改变

var sidenavInstance = M.Sidenav.init(elems);

到

var sidenavInstance = M.Sidenav.init(elems, {});

官方文档中并不清楚，但您必须将选项作为第二个参数传递。如果您没有任何特殊选项，则应输入{}。

【讨论】：