javascript - Materialise 下拉菜单不采用 Meteor 模板中的选项

Question

所以，我正在使用 Meteor 和 Materialize-css 开发一个网站，并尝试在导航栏中实现一个下拉菜单，该菜单在悬停时激活而不是在单击时激活。

我的文件是这样的:

HTML:

  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>

  <nav>
    <div class="nav-wrapper">
      <ul class="left hide-on-med-and-down">
        <li><a href="/">Home</a></li>
        <li><a class="dropdown-button" href="#" data-activates="dropdown1">Services
          Available</a></li>
      </ul>
    </div>
  </nav>

</template>

JS:

Template.nav.onRendered(function () {
  $(".dropdown-button").dropdown({
    hover: true
  });
});

(已编辑)由于我的误解，我的印象很短，$(".dropdown-button").dropdown() 没有做任何事情。但是，它正在激活下拉菜单。它只是没有采用 hover: true 选项，或与此相关的任何其他选项。为什么这个不注册？我错过了什么吗？我所做的研究表明，如果 .dropdown() 在 template.onRendered() 中被调用，下拉菜单将根本无法工作。我需要能够将选项传递给它，但我似乎无法让它工作。

我用 meteor add 安装的一些东西:

• 四七:scss
• materialize:materialize v0.97.7(0.97.8 崩溃 meteor ，目前)
• 铁:路由器

最初发布此问题后，我做了更多研究，然后我被定向到 this post .就像这个答案所暗示的那样，我非常确信我遇到的问题与 DOM 就绪有关，但我有点迷茫。我尝试使用 Tracker.afterFlush()，但这似乎没有任何帮助，所以我仍然卡住了。

非常感谢任何帮助，谢谢。

Answer 1

这是因为'hover'需要用引号括起来。这只是您的 JSON 中的语法错误。

  $(".dropdown-button").dropdown({
    "hover": true
  });

我用 materialize 1.0.0-Beta 测试了这个。