Question

我有一个Meteor项目，我在玩Materialize框架。我已经安装了iron：router，materialize：materialize，cfs：standard-packages和cfs：gridfs。

我遇到的是导航栏无法正常工作。我按照http://materializecss.com的文档进行了操作，但没有运气。我的代码和推荐代码如下。

<template name="nav">

<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <!-- Dropdown Trigger -->
            <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

            <!-- Dropdown Structure -->
            <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider"></li>
                <li><a href="#!">three</a></li>
            </ul>
        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
            <li><a href="#">Navbar Link</a></li>
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
</nav>

建议使用以下代码初始化导航栏折叠功能（这来自实体化文档）

$(".button-collapse").sideNav();

我已经尝试了这个并且它不起作用。

此外，如果您查看下方的导航栏代码，则会包含下拉列表。但是，使用实体化文档中的建议代码，下拉列表将不起作用。建议的代码如下。

$(".dropdown-button").dropdown();

我为我的下拉列表中包含的jQuery代码也来自实体化文档，但仍然无效。它遵循上面的惯例，但设置了几个选项。

$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false, // Displays dropdown below the button
  alignment: 'left' // Displays dropdown with edge aligned to the left of button
}

）;

Answer 1

我使用此代码......

Template.navbar.onRendered(function(){ $(".sidenav-icon").sideNav({ closeOnClick: true }); // http://materializecss.com/side-nav.html });

将导航栏替换为您的模板名称。您在呈现模板之前调用.sideNav（）。为了测试这个工作你的黑客工作。在显示模板后，在开发者控制台上调用sideNav函数是另一种方式。

Answer 2

经过多次搜索和思考，我想出了解决方案。我认为。虽然它有效。：）

在完成所有搜索和考虑后，虽然我只是使用Meteor.templateName.events将按钮/链接绑定到模板。以下是我添加到core.js的代码（这是我用于核心文件的所有javascript代码的文件。（_ head.html，_footer.html，home.html，_nav.html ）

Template.nav.events({
'click .button-collapse': function(event){
    $('.button-collapse').sideNav();
},
'click .dropdown-button': function(event){
    $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
        constrain_width: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: false, // Displays dropdown below the button
        alignment: 'left' // Displays dropdown with edge aligned to the left of button
        }
    );
}

}）;

正如您所看到的，我使用了推荐的jQuery代码，但将其包含在Meteor＆＃39; click＆＃39;事件。正如我所说的那样，虽然需要几秒钟才能达到完整的功能。我想这与加载时间等有关。我知道有一个解决方法，但我还不确定那是什么。：）

物化导航栏不在Meteor中工作

2 个答案: