如何使用物化 css 将移动折叠 navarro 添加到 django？答案

【问题标题】：How to add mobile collapsing navarro to django using materialize css?如何使用物化 css 将移动折叠 navarro 添加到 django？
【发布时间】：2020-09-30 21:17:16
【问题描述】：

在移动设备上添加导航栏时遇到一些问题，当设备处于拆分视图时，该导航栏会折叠成“汉堡栏”。这是我到目前为止所做的，汉堡栏显示但是当我点击它时没有任何反应，我的代码：

<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    {% load static %}
    <link rel="shortcut icon" type="image/JPG" href="{% static 'images/favicon.ico' %}"/>
    <link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>


<body>

<div class="navbar-fixed">
  <nav>
      <div class="nav-wrapper  teal lighten-1">
        <a href="#!" class="brand-logo"><i class="material-icons">assignment </i>Logo</a>
        <a href="#" data-target="mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="/">Home</a></li>
          <li><a href="/newsroom">Newsroom</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <ul class="sidenav" id="mobile">
    <li><a href="/">Home</a></li>
    <li><a href="/newsroom">Newsroom</a></li>
  </ul>

<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });
</script>

  <div>
    {% block content %}
    {% endblock %}
  </div>

</body>

<script src="{% static "tinymce/js/prism.js" %}"></script>

我认为问题出在 javascript 部分，但我无法解决。

从现在开始感谢！

【问题讨论】：

标签： javascript python html django materialize

【解决方案1】：

取出未定义的options变量：

<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems);
  });
</script>

这是文档的问题，而不是你。

【讨论】：