实现 - 下拉菜单不会显示答案

【问题标题】：Materialize - Dropdown menu won't show实现 - 下拉菜单不会显示
【发布时间】：2020-07-08 16:17:36
【问题描述】：

我正在尝试构建一个 Web 应用程序。我是 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>

【问题讨论】：

标签： html dropdown materialize

【解决方案1】：

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

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

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

【讨论】：