Materialise - 下拉菜单不会显示

Question

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

<head>
   {% load static %}
    <link href="{% static 'tinymce/css/prism.css' %}" rel = "stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<script src="{% static 'tinymce/js/prism.js' %}">
    var dropdowns = document.querySelectorAll('.dropdown-trigger')
    for (var i = 0; i < dropdowns.length; i++){
        M.Dropdown.init(dropdowns[i]);
    }
</script>
<body>
  <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
      <li><a href="covid.html">Covid</a></li>
      <li><a href="bone-tumor.html">Bone</a></li>
    </ul>
    <nav>
      <div class="nav-wrapper blue lighten-2">
        <a href="" class="brand-logo">Test Site</a>
        <ul class="right">
          <!-- Dropdown Trigger -->
          <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Models<i class="material-icons right"></i></a></li>
        </ul>
      </div>
    </nav>
</body>

Answer 1

无需使用循环，documentation页面中的初始化代码就足够了：

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

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

Materialise - 下拉菜单不会显示

Materialize - Dropdown menu won't show

html

materialize

dropdown