您的位置:首页 > Web前端 > BootStrap

bootstrap单击导航条下的li后,自动收回

2015-08-17 15:06 465 查看
最近在写一个产品展示的页面,用到了bootstrap,发现导航条在手机上下拉时如果不跳转页面,下拉的导航条是不会自动回收的,需要自己手动添加onclick事件回收。

导航条的代码如下:

<nav class="navbar  navbar-default">
     <div class="container">
       <div class="navbar-header">
         <button type="button" id="collapse" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">
       <img alt="XXX" src="shouye/regis_logo.png">
     </a>
       </div>
       
       <div id="navbar" class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
           <li class="active"><a href="#">首页</a></li>
           <li><a href="#about">公司简介</a></li>
         </ul>
     <ul class="nav navbar-nav navbar-right">
       <li><a href="#about" class="scroll hvr-shutter-out-vertical">ABOUT</a></li>
<li><a href="#screens" class="scroll hvr-shutter-out-vertical">FEATURES</a></li>
<li><a href="#reviews" class="scroll hvr-shutter-out-vertical">REVIEWS</a></li>
<li><a href="#screens" class="scroll hvr-shutter-out-vertical">SCREENS</a></li>
<li><a href="#demo" class="scroll hvr-shutter-out-vertical">DEMO</a></li>
<li><a href="#support" class="scroll hvr-shutter-out-vertical">SUPPORT</a></li>
<li><a href="#get-it" class="scroll active hvr-shutter-out-vertical">GET IT</a></li>
     </ul>
     
       </div><!-- /.nav-collapse -->
     </div><!-- /.container -->
   </nav><!-- /.navbar -->


上面是导航条的代码

下面需要添加事件:

$(".nav > li > a").click(function(){
<span style="white-space:pre">	</span>$('#collapse').addClass("collapsed");
<span style="white-space:pre">	</span>$('#collapse').attr("aria-expanded",false);
<span style="white-space:pre">	</span>$("#navbar").removeClass("in");
<span style="white-space:pre">	</span>$("#navbar").attr("aria-expanded",false);
});


这样就能在手机上浏览时,单击一个li不跳转页面也可以把展开的下拉菜单收上去。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: