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

问题描述

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

<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部分，但我无法解决。

从现在开始感谢！

标签： javascriptpythonhtmldjangomaterialize

取出未定义的options变量：

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

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

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

问题描述

解决方案

推荐阅读