在小屏幕和手機屏幕下，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');
    });
  }
});

 實現導航欄自動折疊的效果如下：

 

希望這篇文章對遇到相同問題的人有幫助！