How to make Navbar collapse upon selection?

Question

I've created a Meteor project which uses Twitter Bootstrap for the layout. I have a Nav-bar which is laid out like this: Bootstrap Components

My problem is, on mobile the nav-bar goes into the collapsible mode (which is fine), but when I click the links which route to other templates (using iton:router package). The collapsible menu stays expanded. Is there a way to get it closed upon selecting an item?

Answer 1

Just add:

$(".navbar-toggle").click();

To each route you want (in the router.js file). Or the better option is to define it as a function which you call at each route.

Router.route('/somewhere', function(){
    $(".navbar-toggle").click();
    this.render("navbar", {to:"navbar"});
    this.render("something", {to:"main"});
});

Edit:

Using $('.navbar-toggle').click(); once off instead of applying it to each route, you can do that following in the router.js file:

Router.configure({
  onAfterAction: function() {
    if($('#navbar-collapse').hasClass('in')) {
      $('.navbar-toggle').click();
    }
  }
});