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

So, I'm working on a website with Meteor and Materialize-css, and attempting to implement a dropdown menu in the navbar, which activates on hover instead of on click.

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

I have my files this way:

我有这样的文件：

HTML:

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:

JS：

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

(Edited) I was under the impression briefly, due to something I misinterpreted, that $(".dropdown-button").dropdown() wasn't doing anything. It is activating the dropdown, however. It just isn't taking the hover: true option, or any other option for that matter. Why isn't this registering? Am I missing something? The research I've done suggests that the dropdown won't work at all without .dropdown() being called in template.onRendered(). I need to be able to pass options to it, but I can't seem to get it to work.

（已编辑）由于我误解的原因，我在短暂的印象中，$（“。dropdown-button”）。dropdown（）没有做任何事情。然而，它正在激活下拉列表。它只是没有采用悬停：真实选项，或任何其他选项。这为什么不注册？我错过了什么吗？我所做的研究表明，如果没有在template.onRendered（）中调用.dropdown（），那么下拉列表将无法正常工作。我需要能够将选项传递给它，但我似乎无法让它工作。

Some things I've installed with meteor add:

我用meteor添加的一些东西：

fourseven:scss
fourseven：SCSS
materialize:materialize v0.97.7 (0.97.8 crashes meteor, currently)
具体化：物化v0.97.7（目前崩溃流星0.97.8）
iron:router
铁：路由器

I've done a bit more research after originally posting this question, and I was directed to this post. Like this answer suggests, I'm pretty convinced the issue I'm having has to do with DOM readiness, but I'm a little lost. I tried using Tracker.afterFlush(), but that didn't seem to help anything, so I'm still stuck.

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

Any help is greatly appreciated, thank you.

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

3 个解决方案

#1

it's because 'hover' needs to be surrounded with quotes. this is just a syntax error in your JSON.

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

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

I tested this with materialize 1.0.0-Beta.

我用物化1.0.0-Beta测试了这个。

#2

Make sure you have Jquery included. This may be causing the problem.

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

I would comment but don't have enough rep.

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

#3

I figured it out!

我想到了！

I was getting so frustrated that I tried downgrading Materialize from v0.97.7 to v0.97.0, because version .8 had given me trouble. And now (like magic) everything works! I hope this helps someone in the future.

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

#1