我有一个流星项目使用铁路由器。
在我的项目中,我有一个引导导航栏,不幸的是,每当我导航到一条路线,而导航栏是扩展的(由于屏幕是最小宽度),导航栏保持扩展,当我去一个新的路线。
有没有办法设置导航栏在改变路线时再次折叠,就像通常的页面刷新一样?
导航栏模板:
<template name="navigation">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{{pathFor route='home'}}"><span class="glyphicon glyphicon-home"></span> RNG Leaderboard</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-phone"></span> Games <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="/headsortails">Heads or Tails</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-stats"></span> Leaderboards <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="/headsortailsleaderboard">Heads or Tails</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{{#if currentUser}}
{{#if isInRole 'admin'}}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-cog"></span> Maintenance <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="/manageusers"><span class="glyphicon glyphicon-user"></span> Manage Users</a>
</li>
</ul>
</li>
{{/if}}
<li><a href="/@{{currentUser.username}}"><span class="glyphicon glyphicon-user"></span> {{currentUser.profile.firstName}} {{currentUser.profile.lastName}}</a></li>
<li><a id="logout" href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-out"></span> Log out</a></li>
{{else}}
<li><a href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li>
<li><a href="{{pathFor route='signup'}}"><span class="glyphicon glyphicon-pencil"></span> Sign up</a></li>
{{/if}}
</ul>
</div>
</div>
</nav>
</template>
工艺路线代码:
Router.configure({
layoutTemplate: 'layout', // Defines the layout template
loadingTemplate: 'loading', // Defines the loading template
onAfterAction: function(){
$('.nav-collapse').collapse('hide');
}
});
Router.plugin('dataNotFound', {
notFoundTemplate: 'dataNotFound'
});
Router.route('/', {
name: 'home',
template: 'home'
});
Router.route('/signup');
Router.route('/login');
Router.route('/recoverpassword');
Router.route('/resetpassword');
Router.route('/manageusers', {
name: 'manageusers',
controller: 'ManageUsersController',
});
ManageUsersController = RouteController.extend({
template: 'manageusers',
before: function() {
if (!Roles.userIsInRole(Meteor.userId(), 'admin')) {
this.redirect('home');
} else {
this.render('manageusers');
}
}
});
var usernameRoute = '/@:username';
Router.route(usernameRoute, {
name: 'profile',
controller: 'ProfileController'
});
ProfileController = RouteController.extend({
template: 'profile',
waitOn: function() {
return Meteor.subscribe('userProfile', this.params.username);
},
data: function() {
var username = Router.current().params.username;
return Meteor.users.findOne({
username: username
});
}
});
Router.route('/headsortails');
Router.route('/headsortailsleaderboard');
3条答案
按热度按时间0dxa2lsx1#
一个不优雅但实用的解决方案是检查导航栏是否展开,然后点击它-根据巴里道尔的解决方案
ltqd579y2#
根据Michel的回答和一些挖掘,我在router.js文件中提出了以下解决方案:
a2mppw5e3#
邻居提供的解决方案都有效。
它必须是这样的。
attr()
返回字符串'true'
或'false'
,而不是布尔值,这就是为什么使用=== 'true'
。