在小屏幕和手机屏幕下，Bootstrap导航栏的自动折叠隐藏

遇到的问题：

　　最近在使用Bootstrap框架做网页时发现，在小屏幕和手机屏幕之下（max-width: 768px），导航栏不能在点击导航链接时，自动折叠导航栏。或者在展开导航栏后，如果不点击其中的导航链接，用户在选择滑动屏幕时，不能做到自动折叠导航栏。需要用户手动点击折叠按钮，才能收回去。这在小屏幕宝贵的显示面积内，显然不合理，用户体验也不好。

　　我用一张动图来更好的说明这个问题：

　　

先看HTML代码： 

<!-- HTML-->
<nav class="navbar navbar-fixed-top">
  <div class="container">
  <!-- navbar-header -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <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="#">Project Name</a>
    </div>
    <!-- navbar-nav -->
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#about_me">About me</a></li>
      </ul>
    </div>
  </div>
</nav>

Bootstrap中折叠（Collapse）的方法如下：

方法	描述	实例
Options:.collapse(options)	激活内容为可折叠元素。接受一个可选的 options 对象。	$('#identifier').collapse({     toggle: false })
Toggle:.collapse('toggle')	切换显示/隐藏可折叠元素。	$('#identifier').collapse('toggle')
Show: .collapse('show')	显示可折叠元素。	$('#identifier').collapse('show')
Hide: .collapse('hide')	隐藏可折叠元素。	$('#identifier').collapse('hide')

 

 

 

 

 

 

 

 

 

知道collapse的方法之后，问题就容易解决得多了，只需要用户滚动或者点击导航链接时，调用.collapse('hide')方法，就可以实现自动折叠导航栏了。

JavaScript代码如下：

$(window).scroll(function () {
  //小屏幕下的导航条折叠
  if ($(window).width() < 768) {
    //点击导航链接之后，把导航选项折叠起来
    $("#navbar a").click(function () {
      $("#navbar").collapse('hide');
    });
    //滚动屏幕时，把导航选项折叠起来
    $(window).scroll(function () {
      $("#navbar").collapse('hide');
    });
  }
});

来源：https://www.cnblogs.com/Wudj/p/9108649.html