效果

HTML代码

    <div class="sidebar"><div class="mc-search"><div class="input-group"><input type="text" class="form-control" placeholder="Search..."><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-search"></i></button></span></div></div><div class="navbar navbar-default" id="mycollapse"><!-- <ul class="nav navbar-nav nav-pills nav-stacked"> --><ul class="nav nav-pills nav-stacked"><li><a href="#"><i class="fa fa-dashboard fa-fw"></i> DashBord</a></li><li><a href="#second-level-1" class="second-level accordion-toggle"data-toggle="collapse"data-parent="#mycollapse"><i class="fa fa-table fa-fw"></i> Table<iclass="fa fa-angle-left pull-right"></i></a><ul class="nav collapse" id="second-level-1"><li><a href="#">数据库测试</a></li><li><a href="#">数据库测试</a></li><li><a href="#">数据库测试</a></li></ul></li><li><a href="#"><i class="fa fa-bar-chart fa-fw"></i> Chart</a></li><li><a href="#"><i class="fa fa-edit fa-fw"></i> Form</a></li><li><a href="#second-level-2" class="second-level accordion-toggle"data-toggle="collapse"data-parent="#mycollapse"><i class="fa fa-table fa-fw"></i> Table<iclass="fa fa-angle-left pull-right"></i></a><ul class="nav collapse" id="second-level-2"><li><a href="#">数据库测试</a></li><li><a href="#">数据库测试</a></li><li><a href="#">数据库测试</a></li></ul></li><li><a href="#"><i class="fa fa-wrench fa-fw"></i> UI Element</a></li><li><a href="#second-level-3" class="second-level accordion-toggle"data-toggle="collapse" data-parent="#mycollapse"><i class="fa fa-table fa-fw"></i> Table<iclass="fa fa-angle-left pull-right"></i></a><ul class="nav collapse" id="second-level-3"><li><a href="#">数据库测试</a></li><li><a href="#">数据库测试</a></li><li><a href="#">数据库测试</a></li></ul></li></ul></div></div>

JS代码

$(function () {$(document).on('click', '.accordion-toggle', function(event) {event.stopPropagation();var $this = $(this);var parent = $this.data('parent');var actives = parent && $(parent).find('.collapse.in');// From bootstrap itselfif (actives && actives.length) {actives.data('collapse');actives.collapse('hide');}var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7$(target).collapse('toggle');});
})

效果

  1. 点击一个可以展开下拉菜单。
  2. 点击另外一个如果有下拉菜单则自动关闭上一个展开

转载于:https://www.cnblogs.com/LiuChunfu/p/5132702.html

Bootstrap 手风琴搭配导航条实现常用菜单栏相关推荐

  1. Bootstrap 响应式导航条

    响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...

  2. Bootstrap 反色导航条

    反色导航条 只需在 .navbar 类后面追加 .navbar-inverse 类,就能创建出反色效果导航条,即黑底白字的导航条.如: <div class="navbar navba ...

  3. Bootstrap组件_导航条(默认样式的导航条,品牌)

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  4. Bootstrap学习笔记——导航条、分页导航

    1 导航条 导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...

  5. 【Bootstrap】Bootstrap v5 nav导航条实现部分居左,部分居右布局

    文章目录 一.效果 二.修改后代码 三.分析 3.1 修改前效果 3.2 修改前代码 3.3 方法 四.学习网址 一.效果 在同一行中,资产收集.信息探测等内容居左对齐,而测试与退出登录居右对齐. 二 ...

  6. Bootstrap 组件:导航条组件的使用

    作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址

  7. Bootstrap(五) 导航条、分页导航

    本文转自:http://www.imooc.com/learn/141 导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...

  8. Bootstrap组件学习之导航和导航条

    导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...

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

    最近在写一个产品展示的页面,用到了bootstrap,发现导航条在手机上下拉时如果不跳转页面,下拉的导航条是不会自动回收的,需要自己手动添加onclick事件回收. 导航条的代码如下: <nav ...

最新文章

  1. 移动端与PHP服务端接口通信流程设计(基础版)
  2. xmanager 开启X11转发失败问题解决
  3. 【PHP7源码分析】PHP7到底有多快,基准测试与特性分析告诉你
  4. c语言 显示 图形界面,「分享」C语言如何编写图形界面
  5. C# 在自定义的控制台输出重定向类中整合调用方信息
  6. html中可以自定义属性,,,妈的竟然才知道..
  7. hdu 1710 Binary Tree Traversals (二叉树)
  8. eclipse技巧总结
  9. 回调地狱以及用promise怎么解决回调地狱
  10. 可发弹幕php,JavaScript直播评论发弹幕切图功能点集合效果代码
  11. Opencl入门Demo
  12. 转换php时间戳,如何实现转换php时间戳
  13. 短视频源码应该优化的六个方面
  14. 析构函数什么时候析构
  15. 程序员学炒股(3) 个股和大盘的关系之二
  16. linux mysql ip_Linux下配置mysql允许指定IP远程访问
  17. QT构建编译出现错误error: undefined reference to 的解决办法
  18. Python系列之Django(ORM)
  19. STM32F407 HAL库 ADC笔记
  20. 张一鸣:每个逆袭的年轻人,都具备的底层能力

热门文章

  1. CentOS进不了系统
  2. Android Architecture Components 整理
  3. Set 、HashSet、TreeSet、LinkedHashSet、EnumSet
  4. 前端路由的概念与原理
  5. php uncaught thrown,PHP异常详解
  6. wordpress前台编辑文章_9款 WordPress 最美极简主题推荐
  7. python列表知识点_Python列表知识点
  8. android全面屏系统哪个版本开始,Android全面屏
  9. java filestream 包,java.io.FileOutputStream.write(byte[] b)
  10. NTP客户端通过脚本一键配置