Bootstrap教學-Navbar導覽列點完選單自動收合

梅問題-Bootstrap教學-Navbar導覽列點完選單自動收合
  Bootstrap中Navbar導覽列也是一個相當實用的功能,透過導覽列不但會自動依裝置的解析度,自動縮放並調整模式外,甚至還可以整合Bootstrap內建的頁籤跟隨與跳頁功能, 因此當點了選單中的項目後,下方的頁面就會跳到指定的區塊中,其效果有點像是以前的網頁錨點功能,甚至還可以整合scroolto,就可作出動態的滾動跳頁。
  有用過的朋友都知道,當把Navbar的選單展開後,再點選單雖然下方的區塊鋰直接跳到指定的區域中,但選單並不會收起來,需再手動點一下那選單鈕,才能將選單收合起來,因此先前有朋友問到,是否能點了選單就自動收合,其實是可以的,只需加入一小段的js控制後,就能實現啦!因此有此需求的朋友,也趕快來看看囉!
Step1
將下方的語法貼到</body>結尾的上方,而此語法主要的功能在於,當點了navbar的選單後,就會自動撃發navbar-toggle,這時選單就會自動的收合起來啦!
$(function(){ 
if($(window).width()<480){ //當視窗小於480時才運作
$('.navbar a').on('click', function(){
    $('.navbar-toggle').click();
  });
}
});
梅問題-Bootstrap教學-Navbar導覽列點完選單自動收合
Step2
儲存好後,當點選單鈕,將選單展開後,再點選單中的選項,就會自動將選單收合,並跳到指定的區塊中啦!
梅問題-Bootstrap教學-Navbar導覽列點完選單自動收合
[範例預覽] [範例下載]

相關文章

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

免寫程式!HTML5新屬性自動檢核表單與欄位格式是否填寫正確

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    Jacky 說道:

    您好~想請教一下,我把選單固定在最上方(navbar-fixed-top),然後也有套用自動收合選單&滾動監聽效果,但我到PC版看時,點選最上方的選單,會突然出現一個橫向的卷軸,然後網頁滾到指定區域時,才會消失,想請教大大可能是哪個地方出現問題? 感謝您的回覆~

    回應:
    感謝告知,已作了修正

近期講座

近期講座

更多講座