Materialise 下拉菜单在车把渲染中不起作用

Question

到目前为止，关于这个问题的其他帖子对我没有帮助，所以我想我会分享我的挑战。

下面是我的 main.handlebars 设置，包括我的 jQuery 和 Materialise 库，以及用于初始化 dropdown() 方法的显式部分。

<body>
  {{{body}}}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <script>
    $(document).ready(function (e) {
      alert("jquery load");
      debugger;
      $('.dropdown-trigger').dropdown();
    });
  </script>

</body>

并在 {{body}} 中呈现，这是我的导航中具有所需下拉菜单的部分：

    <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

    <!-- Dropdown Structure -->
    <ul id='dropdown1' class='dropdown-content' role="menu">
      <li><a href="#city">City</a></li>
      <li><a href="#host">Host</a></li>
      <li><a href="#interest">Interest</a></li>
      <li><a href="#dates"><i class="material-icons">view_module</i>Dates</a></li>
      <li class="divider" tabindex="-1"></li>
      <li><a href="#all"><i class="material-icons">cloud</i>All</a></li>
    </ul>

根据我读到的内容，我应该一切都好。 . .我知道初始化 <script> 通过使用 alert() 进行测试来运行，但没有任何操作。难倒了！

Answer 1

您似乎使用的是 Materialise 版本 0.100.2，但您正在阅读 Materialise 版本 1.0.0 的文档。

如果您想使用 0.1 版，您需要使用属性 data-activates 而不是 data-target 和 class 名称 dropdown-button 而不是 dropdown-trigger 在你的标记中。

可以在此处找到有关两个版本之间重大更改的更多信息：https://github.com/Dogfalo/materialize/blob/v1-dev/v1-upgrade-guide.md

干杯！

Materialise 下拉菜单在车把渲染中不起作用

Materialize Dropdown not Working in Handlebars Rendering

jquery

materialize

express-handlebars