在 Meteor 模板中实现下拉菜单不采用选项答案

【问题标题】：Materialize dropdown not taking options in Meteor template在 Meteor 模板中实现下拉菜单不采用选项
【发布时间】：2017-04-03 00:15:02
【问题描述】：

所以，我正在使用 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 选项或任何其他选项。这个怎么不注册？我错过了什么吗？我所做的研究表明，如果没有在template.onRendered() 中调用.dropdown()，下拉菜单将根本不起作用。我需要能够将选项传递给它，但我似乎无法让它工作。

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

fourseven:scss
materialize:materialize v0.97.7（0.97.8 崩溃流星，目前）
铁：路由器

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

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

【问题讨论】：

标签： javascript html meteor drop-down-menu materialize

【解决方案1】：

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

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

我使用 materialize 1.0.0-Beta 对此进行了测试。

【讨论】：

【解决方案2】：

确保您已包含 Jquery。这可能会导致问题。

我会发表评论，但没有足够的代表。

【讨论】：

感谢您的建议。 console.log($(".dropdown-button")); 插入到 nav.onRendered() 中成功地将元素打印到控制台，所以 jQuery 肯定是在工作。

【解决方案3】：

我想通了！

我非常沮丧，以至于我尝试将 Materialize 从 v0.97.7 降级到 v0.97.0，因为 .8 版本给我带来了麻烦。现在（就像魔术一样）一切正常！我希望这对将来的某人有所帮助。

【讨论】：