1. 程式人生 > >在小螢幕和手機螢幕下,Bootstrap漢堡導航的自動摺疊隱藏

在小螢幕和手機螢幕下,Bootstrap漢堡導航的自動摺疊隱藏

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

解決辦法:

//點選導航之後隱藏
        $(window).scroll(function() {
            //小螢幕下的導航條摺疊
            if($(window).width() < 768) {
                //點選導航連結之後,把導航選項摺疊起來
                $("#navbar a").click(function() {
                    $("#navbar").collapse('hide');
                });
                //滾動螢幕時,把導航選項摺疊起來
                $(window).scroll(function() {
                    $("#navbar").collapse('hide');
                });
            }
        });