twitter-bootstrap - 如何使导航栏在选择时折叠？

Question

我创建了一个使用 Twitter Bootstrap 进行布局的 Meteor 项目。我有一个布局如下的导航栏:Bootstrap Components

我的问题是，在移动设备上，导航栏进入可折叠模式(这很好)，但是当我单击路由到其他模板的链接时(使用 iton:router 包)。可折叠菜单保持展开状态。有没有办法在选择项目时关闭它？

Answer 1

只需添加:

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

到您想要的每条路线(在 router.js 文件中)。或者更好的选择是将其定义为您在每条路线上调用的函数。

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

编辑:

使用 $('.navbar-toggle').click(); 一次而不是将它应用到每个路由，您可以在 router.js 文件中执行以下操作:

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