Html 物化-下拉菜单赢得'；不显示

我正在尝试构建一个web应用程序。我是HTML新手，主要是从视频教程和其他来源复制粘贴内容。当鼠标悬停或单击下拉菜单时，它不会下拉。我不太确定代码流以及javascript如何适应，所以我不确定从何处着手解决这个问题。感谢您的帮助

{%load static%}
var dropdowns=document.querySelectorAll（'.dropdown触发器'）
对于（变量i=0；i

无需使用循环，页面中的初始化代码即可满足以下要求：

document.addEventListener('DOMContentLoaded', function() {
    var dropdowns = document.querySelectorAll('.dropdown-trigger');
    M.Dropdown.init(dropdowns);
  });

此外，JavaScript应该始终放在文档的末尾，在结束正文标记之前（并且始终放在materialize.js提供之后）。记住在document.ready中始终使用自定义JS，这样就不会调用尚未呈现的组件上的函数