最近在使用Bootstrap框架做网页时发现,在小屏幕和手机屏幕之下(max-width: 768px),导航栏不能在点击导航链接时,自动折叠导航栏。或者在展开导航栏后,如果不点击其中的导航链接,用户在选择滑动屏幕时,不能做到自动折叠导航栏。需要用户手动点击折叠按钮,才能收回去。这在小屏幕宝贵的显示面积内,显然不合理,用户体验也不好。
解决办法:
//点击导航之后隐藏
$(window).scroll(function() {
//小屏幕下的导航条折叠
if($(window).width() < 768) {
//点击导航链接之后,把导航选项折叠起来
$("#navbar a").click(function() {
$("#navbar").collapse('hide');
});
//滚动屏幕时,把导航选项折叠起来
$(window).scroll(function() {
$("#navbar").collapse('hide');
});
}
});