选择链接后，Bootstrap 切换菜单展开

Question

在选择要访问的链接后，我无法让移动视图上的导航栏折叠切换不折叠。

我实际上从未见过，但一位客户只是要求我这样做。找了好多地方都没找到。

你可以去看看

http://www.neevasoft.com/docasnovo

有什么想法吗？

我的 HTML：

<header id="header" class="navbar-fixed-top main-nav" role="banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <!-- Logo start -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="#home">
                        <img class="img-responsive"  src="images\logo.png" alt="logo">
                    </a>   

                </div><!--/ Logo end -->

                <nav class="collapse navbar-collapse clearfix" role="navigation">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="page-scroll" href="#home">Home</a></li>
                        <li><a class="page-scroll" href="#services">A Empresa</a></li>
                        <li><a class="page-scroll" href="#historia">História</a></li>
                        <li><a class="page-scroll" href="#about">Participações</a></li>
                        <li><a class="page-scroll" href="#team">Renovada</a></li>
                        <li><a class="page-scroll" href="#contact">Contato</a></li>
                        <li><a class="page-scroll" href="#acervo">Acervo</a></li>
                        <!--li><a class="page-scroll" href="#contact">Contact</a></li-->
                    </ul>
                </nav><!--/ Navigation end -->

            </div><!--/ Col end -->
        </div><!--/ Row end -->
    </div><!--/ Container end -->
</header><!--/ Header end --> 

Answer 1

当您之前检查您是否使用移动设备尺寸时，您也许可以在链接点击事件上切换折叠类。

类似这样的：

$(function(){
  $(window).resize(function(){
    if($(window).width() < 767){ // check if you're on mobile version
      $(".navbar-nav a").click(function(){
        $('.navbar-collapse').addClass('collapse');
      });
    }
  });
});

我没有测试它，但我想你明白它的逻辑。

Answer 2

有一种动态折叠的方法：

$(".navbar-nav a").click(function(){
    $('.collapse').collapse("hide");
});