我使用的是materialize.css,但侧面菜单似乎无法预测。它通常在localhost中的所有主要浏览器中都能正常工作,但是在生产中单击sidemenu并不会显示它(ridersam.meteor.com)。我不知道自己在这方面做错了什么。我会借助一些Karma来帮助你解决这个问题。我的header.html和header.js的代码如下:
header.html中
<template name="header">
{{#if currentUser}}
<div class="navbar-fixed">
<nav role="navigation" class="amber accent-3">
<div class="nav-wrapper container">
<a href="#" class="brand-logo center disable-link-cursor">{{navTitle}}</a>
<a href="#" class="nav-back-button {{backButtonActive}}">
<i class="mdi-navigation-chevron-left" style="font-size: 3em;"></i>
</a>
<a href="#" data-activates="slide-out" class="button-collapse show-on-large {{buttonCollapseActive}}">
<i class="mdi-navigation-menu"></i>
</a>
{{#if onActivityList}}
<a href="{{ pathFor 'activitySubmit' }}" class="right"><i class="mdi-content-add" style="font-size: 3em;"></i></a>
{{/if}}
<ul id="slide-out" class="side-nav amber accent-3">
<center><i class="ion-android-person custom-lg"></i></center>
<li class="{{ activeRouteClass 'rideList' }}"><span><i class="ion-android-bus liner"></i></span><a href="{{ pathFor 'ridesList' }}"><b>RIDES</b></a></li>
<li class="{{ activeRouteClass 'activityList' }}"><span><i class="ion-android-time liner"></i></span><a href="{{ pathFor 'activityList' }}"> <b>SCHEDULED</b></a></li>
<li class="{{ activeRouteClass 'mapCanvas' }}"><span><i class="ion-pull-request liner"></i></span><a href="{{ pathFor 'mapCanvas' }}"> <b>REQUEST RIDE</b></a></li>
<li><span><i class="ion-log-out liner"></i></span><a id="logout-button" href="#" ><b>LOG OUT</b></a></li>
</ul>
</div>
</nav>
</div>
{{/if}}
</template>
HEADER.js
Template.header.onRendered(function () {
$(".button-collapse").sideNav({
menuWidth: 300, // Default: 240
edge: "left",
closeOnClick: true
});
});
Template.header.helpers({
navTitle: function () {
switch (Router.current().route.getName()) {
case "activityList": return "Your Scheduled";
case "login": return "Log In";
case "register": return "Register";
case "activitySubmit": return "Schedule Route";
case "activityPage": return this.title;
default: return "RideGlobus";
}
},
onActivityList: function () {
return Router.current().route.getName() === "activityList";
},
buttonCollapseActive: function () {
return isBackPage() ? "hide-display" : "show-display";
},
backButtonActive: function () {
return isBackPage() ? "show-display" : "hide-display";
},
activeRouteClass: function () {
var args = Array.prototype.slice.call(arguments, 0);
args.pop();
var active = _.any(args, function (name) {
return Router.current() && Router.current().route.getName() === name;
});
return active && "active";
}
});
Template.header.events({
"click #logout-button": function (e) {
e.preventDefault();
Meteor.logout(function (error) {
if (error) {
alert("We could not log you out at the moment. Please try again later.");
} else {
Router.go("login");
}
});
},
"click .nav-back-button": function (e) {
e.preventDefault();
window.history.back();
}
});
isBackPage = function () {
switch (Router.current().route.getName()) {
case "activitySubmit": return true;
case "activityPage": return true;
case "ridePage": return true;
case "mapCanvas": return true;
default: return false;
}
}