Twitter bootstrap 引导导航栏在路线更改时保持展开状态

我有一个流星项目，使用铁路由器

在我的项目中，我有一个引导导航栏，不幸的是，每当我在导航栏展开时导航到一条路线时（由于屏幕为最小宽度），当我转到一条新路线时，导航栏仍保持展开状态

有没有一种方法可以像通常的页面刷新一样，将导航栏设置为在更改路由时再次折叠

编辑：

导航栏模板：

<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>

---

根据Michel的回答和深入研究，我在router.js文件中提出了以下解决方案：

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

---

一个不雅观但实用的解决方案是检查导航栏是否被扩展，然后点击它——按照巴里·道尔的解决方案

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

---

Neigher都提供了有效的解决方案

必须是这样

attr（）

返回字符串

'true'

或

'false'

不是布尔值，这就是为什么使用

='true'

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

---

你确定这样行吗？当Navar是关闭的，我走到一条新的路线上时，路由会自动打开，这是非常令人讨厌的。啊，没有考虑到，在我的应用程序中，你只能通过Navar去一条新的路线，所以你需要做一些额外的代码来防止这个函数在你使用不同的方法进入一个新的路线的情况下运行。

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