在小螢幕和手機螢幕下，Bootstrap導覽列的自動摺疊隱藏

標籤：pre   網頁   active   ati   好的   script   UNC   button   class   

遇到的問題：

　　最近在使用Bootstrap架構做網頁時發現，在小螢幕和手機螢幕之下（max-width: 768px），導覽列不能在點擊導航連結時，自動摺疊導覽列。或者在展開導覽列後，如果不點擊其中的導航連結，使用者在選擇滑動螢幕時，不能做到自動摺疊導覽列。需要使用者手動點擊摺疊按鈕，才能收回去。這在小螢幕寶貴的顯示面積內，顯然不合理，使用者體驗也不好。

　　我用一張動圖來更好的說明這個問題：

　　

解決方案：

先看HTML代碼： 

 1 <!-- HTML--> 2 <nav class="navbar navbar-fixed-top"> 3   <div class="container"> 4   <!-- navbar-header --> 5     <div class="navbar-header"> 6       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 7         <span class="sr-only">Toggle navigation</span> 8         <span class="icon-bar"></span> 9         <span class="icon-bar"></span>10         <span class="icon-bar"></span>11       </button>12       <a class="navbar-brand" href="#">Project Name</a>13     </div>14     <!-- navbar-nav -->15     <div id="navbar" class="navbar-collapse collapse">16       <ul class="nav navbar-nav">17         <li class="active"><a href="#">Home</a></li>18         <li><a href="#features">Features</a></li>19         <li><a href="#about_me">About me</a></li>20       </ul>21     </div>22   </div>23 </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代碼如下：

 1 $(window).scroll(function () { 2   //小螢幕下的導航條摺疊 3   if ($(window).width() < 768) { 4     //點擊導航連結之後，把導航選項摺疊起來 5     $("#navbar a").click(function () { 6       $("#navbar").collapse(‘hide‘); 7     }); 8     //滾動螢幕時，把導航選項摺疊起來 9     $(window).scroll(function () {10       $("#navbar").collapse(‘hide‘);11     });12   }13 });

 實現導覽列自動摺疊的效果如下：

 

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

在小螢幕和手機螢幕下，Bootstrap導覽列的自動摺疊隱藏