Question

所以，我正在使用Meteor和Materialise-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安装的一些内容：

fourseven：SCSS
具体化：具体化v0.97.7（0.97.8崩溃流星，目前）
铁：路由器

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

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

Answer 1

它是因为＆＃39; hover＆＃39;需要用引号括起来。这只是JSON中的语法错误。

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

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

Answer 2

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

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

Answer 3

我明白了！

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

物化下拉菜单未选择Meteor模板

3 个答案: