Bootstrap navbar остается расширенным по изменению маршрута

Question

У меня есть проект Meteor, который использует железный маршрутизатор.

В моем проекте у меня есть загрузочный навигатор и, к сожалению, всякий раз, когда я перемещаюсь по маршруту, в то время как навигационная панель расширяется (из-за минимальной ширины экрана), навигационная панель остается расширенной, когда я перехожу на новый маршрут.

Есть ли способ установить, что navbar снова рушится при смене маршрутов, как при обычном обновлении страницы?

Edit:

Navbar Шаблон:

<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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;Maintenance <span class="caret"></span></a> 
          <ul class="dropdown-menu"> 
           <li> 
            <a href="/manageusers"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;Manage Users</a> 
           </li> 
          </ul> 
         </li> 
        {{/if}} 
        <li><a href="/@{{currentUser.username}}"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;&nbsp;&nbsp;{{currentUser.profile.firstName}}&nbsp;{{currentUser.profile.lastName}}</a></li> 
        <li><a id="logout" href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;&nbsp;&nbsp;Log out</a></li> 
       {{else}} 
        <li><a href="{{pathFor route='login'}}"><span class="glyphicon glyphicon-log-in"></span>&nbsp;&nbsp;&nbsp;&nbsp;Log in</a></li> 
        <li><a href="{{pathFor route='signup'}}"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;&nbsp;&nbsp;Sign up</a></li> 
       {{/if}} 
      </ul> 
     </div> 
    </div> 
    </nav> 
</template> 

Router код:

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'); 

Answer 1

безвкусное, но практичное решение, чтобы проверить, если Navbar расширяется, то нажмите на нее - по решению Барри Дойла

closeNavBar: function() { 
    var isExpanded = $('.navbar-toggle').attr('aria-expanded') === true; 
    if(isExpanded) { 
     $('.navbar-toggle').click(); 
    } 
    this.next(); 
    }, 

Answer 2

Основе ответа Мишеля и некоторые копаться я придумал следующее решение в моей router.js файл:

Router.configure({ 
    onAfterAction: function(){ 
    $('.navbar-toggle').click(); 
    } 
}); 

Answer 3

Neigher оба предлагаемых решения работали.

Должно быть так. attr() возвращает строку 'true' или 'false' not boolean, поэтому используйте === 'true'.

Router.configure({ 
    ... 
    onAfterAction() { 
     const navbarToggle = $('.navbar-toggle'); 
     if (navbarToggle.attr('aria-expanded') === 'true') { 
      navbarToggle.click(); 
     } 
    } 
});