我在添加导航栏时遇到一些问题，该导航栏在移动设备上以及处于拆分视图时会折叠为“汉堡栏”。这是我到目前为止所做的，汉堡栏显示，但是当我单击它时什么也没有发生，我的代码：
<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部分有关，但我无法解决。
感谢从现在开始！
取出未定义的options变量：
<script language="javascript">
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems);
});
</script>
这是文档的问题，不是您的问题。