TWBS Meteor Navbar 崩溃不起作用

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();
    }
  }
});

TWBS Meteor Navbar 崩溃不起作用

TWBS Meteor Navbar collapse not working

twitter-bootstrap

meteor

navbar

collapse

expand