javascript - Bootstrap 3 导航栏在移动设备上选择时会折叠，但会重新加载整个页面

Question

我的导航栏在桌面上运行良好，但在移动设备上(或者如果我减小浏览器宽度)在选择一个元素后，导航栏保持在原位，但我希望它折叠起来以便可以看到页面内容。我设法通过在下面的代码中添加突出显示的更改来解决此问题，但此解决方案的问题是，它使整个页面重新加载，而我需要的是 header 保持在原位并且不重新加载。这是我的代码:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarHeaderCollapse">
                <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" [routerLink]="['/Home']" **data-toggle="collapse" data-target=".navbar-collapse"**><img src="./app/assets/images/football.png" style="height: 28px; display: inline-block; margin-right: 10px;">Gameplan NFLC</a>
        </div>
        <div class="navbar-collapse collapse" id="navbarHeaderCollapse">
            <ul class="nav navbar-nav">
                <li><a [routerLink]="['/Home']" **data-toggle="collapse" data-target=".navbar-collapse"**>Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Main<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a [routerLink]="['/SuperbowlOdds']" **data-toggle="collapse" data-target=".navbar-collapse"**>Superbowl Odds</a></li>
                    </ul>
                </li>
                <li>
                    <a href="http://forum.gameplan.org.uk/viewforum.php?f=9&sid=c44a50e759b28dd287ad52a0f7609940">Forum</a>
                </li>
            </ul>
        </div>
    </div>
</div>

我的更改可以在三个有链接的地方找到，我基本上添加了:

data-toggle="collapse" data-target=".navbar-collapse" 

到每个 anchor 标记。在添加这些之前，导航栏根本没有折叠，但现在整个页面重新加载。

我需要的是:

1. 使导航栏可折叠
2. 使导航栏标题保持在原位。

任何帮助将不胜感激!

编辑:您可以在此处查看站点的当前状态:http://lovelyjubbly.azurewebsites.net

Answer 1

您想在单击/点击页面上的其他位置后关闭导航栏吗？如果是这样，您必须向文档添加一些事件监听器并手动关闭导航栏。