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

最近在写一个产品展示的页面，用到了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不跳转页面也可以把展开的下拉菜单收上去。

bootstrap单击导航条下的li后，自动收回相关推荐

【解决方法】点击bootstrap里导航条nav里的下拉菜单无反应)
[解决方法]点击bootstrap里导航条nav里的下拉菜单无反应 nav 导航条下拉菜单 nav 导航条下拉菜单只需要按顺序引入以下3个文件即可:
flask系列---模板的继承及Bootstrap实现导航条（四）
在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条.导航 ...
bootstrap制作导航条案例
bootstrap制作导航条案例 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
帝国cms 主导航条下拉菜单功能实现，模板功能扩展
主导航条下拉菜单样式: 具体应用请查看我的个人网站:无知人生实现步骤 1.在公共模板变量>页面头部模板中使用以下标签来加载菜单项 [listshowclass]'0',13,0,0[/list ...
四十五、使用bootstrap制作导航条
使用bootstrap制作导航条参考链接:https://v3.bootcss.com/components/#navbar 项目结构工具使用: Bootstrap Button Generato ...
ideapad720s在接通电源情况下，关机后自动重启的解决办法
win10, ideapad720s, 在接通电源情况下,关机后自动重启的解决办法本文参考:[求助] Win10系统联想U430P笔记本关机后自动重启的解决方法! 步骤1:点击笔记本左下角的&quo ...
Bootstrap(五) 导航条、分页导航
本文转自:http://www.imooc.com/learn/141 导航条基础导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...
css作个课程导航,CSS 制作网页导航条(下)
上节课我们将导航条做成了下面的效果但是此时的导航条还没有链接,还不能点击,这节课我们就要做一个完整的导航条 [第四步] 我们需要将上面的导航条做以下几个修改 1)给上面的导航加上链接: 2)链接文字 ...
Bootstrap（导航条）
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

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

bootstrap单击导航条下的li后，自动收回相关推荐

最新文章

热门文章