在小屏幕和手机屏幕下,Bootstrap导航栏的自动折叠隐藏

时间:2024-02-16 19:08:40

遇到的问题:

  最近在使用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 });

 实现导航栏自动折叠的效果如下:

 

希望这篇文章对遇到相同问题的人有帮助!