bootstrap单击导航条下的li后,自动收回
2015-08-17 15:06
477 查看
最近在写一个产品展示的页面,用到了bootstrap,发现导航条在手机上下拉时如果不跳转页面,下拉的导航条是不会自动回收的,需要自己手动添加onclick事件回收。
导航条的代码如下:
上面是导航条的代码
下面需要添加事件:
这样就能在手机上浏览时,单击一个li不跳转页面也可以把展开的下拉菜单收上去。
导航条的代码如下:
<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不跳转页面也可以把展开的下拉菜单收上去。
相关文章推荐
- bootstrap的datepicker控件使用心得
- bootstrap link
- 使用bootstrap返回空白页面问题
- bootstrap 模态框 删除确认
- Bootstrap下拉菜单dropdown-menu
- 在ASP.NET MVC中使用 Bootstrap table插件
- Bootstrap全屏
- Bootstrap的clearfix
- Bootstrap3组件--2
- 《基于BootStrap3的JSP项目实例教程》第4讲
- bootstrap轮播和百叶窗
- bootstrap之模态框
- bootstrap3学习1:响应式布局layout
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- Boostrap入门+样式学习--贰--(慕课网大漠《玩转bootstrap》[基础])
- datatables配合bootstrap样式进行ajax数据交互并生成表格
- 拥Bootstrap入怀——幻灯片大屏轮播篇
- Bootstrap.js 弹出框的使用方法
- BootStrap入门
- 《基于BootStrap3的JSP项目实例教程》第3讲