Question

我正在尝试构建一个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>

Answer 1

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

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

此外，JavaScript应该始终放置在文档末尾的结束body标记之前（并且始终在提供materialize.js之后）。请记住，始终在document.ready内部使用自定义JS，以免在尚未呈现的组件上调用函数。

实体化-不会显示下拉菜单

1 个答案: