Bootstrap 手风琴搭配导航条实现常用菜单栏
效果
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');}); })
效果
- 点击一个可以展开下拉菜单。
- 点击另外一个如果有下拉菜单则自动关闭上一个展开
转载于:https://www.cnblogs.com/LiuChunfu/p/5132702.html
Bootstrap 手风琴搭配导航条实现常用菜单栏相关推荐
- Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
- Bootstrap 反色导航条
反色导航条 只需在 .navbar 类后面追加 .navbar-inverse 类,就能创建出反色效果导航条,即黑底白字的导航条.如: <div class="navbar navba ...
- Bootstrap组件_导航条(默认样式的导航条,品牌)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- Bootstrap学习笔记——导航条、分页导航
1 导航条 导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
- 【Bootstrap】Bootstrap v5 nav导航条实现部分居左,部分居右布局
文章目录 一.效果 二.修改后代码 三.分析 3.1 修改前效果 3.2 修改前代码 3.3 方法 四.学习网址 一.效果 在同一行中,资产收集.信息探测等内容居左对齐,而测试与退出登录居右对齐. 二 ...
- Bootstrap 组件:导航条组件的使用
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址
- Bootstrap(五) 导航条、分页导航
本文转自:http://www.imooc.com/learn/141 导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Boo ...
- Bootstrap组件学习之导航和导航条
导航 Bootstrap提供灵活.多样的导航组件,允许使用相同的标签.不同的类,实现不同风格的导航样式,具有非常高的可定制行.所有的导航组件,包括标签页.pills.导航列表标签,都必须使用nav类实 ...
- bootstrap单击导航条下的li后,自动收回
最近在写一个产品展示的页面,用到了bootstrap,发现导航条在手机上下拉时如果不跳转页面,下拉的导航条是不会自动回收的,需要自己手动添加onclick事件回收. 导航条的代码如下: <nav ...
最新文章
- 移动端与PHP服务端接口通信流程设计(基础版)
- xmanager 开启X11转发失败问题解决
- 【PHP7源码分析】PHP7到底有多快,基准测试与特性分析告诉你
- c语言 显示 图形界面,「分享」C语言如何编写图形界面
- C# 在自定义的控制台输出重定向类中整合调用方信息
- html中可以自定义属性,,,妈的竟然才知道..
- hdu 1710 Binary Tree Traversals (二叉树)
- eclipse技巧总结
- 回调地狱以及用promise怎么解决回调地狱
- 可发弹幕php,JavaScript直播评论发弹幕切图功能点集合效果代码
- Opencl入门Demo
- 转换php时间戳,如何实现转换php时间戳
- 短视频源码应该优化的六个方面
- 析构函数什么时候析构
- 程序员学炒股(3) 个股和大盘的关系之二
- linux mysql ip_Linux下配置mysql允许指定IP远程访问
- QT构建编译出现错误error: undefined reference to 的解决办法
- Python系列之Django(ORM)
- STM32F407 HAL库 ADC笔记
- 张一鸣:每个逆袭的年轻人,都具备的底层能力
热门文章
- CentOS进不了系统
- Android Architecture Components 整理
- Set 、HashSet、TreeSet、LinkedHashSet、EnumSet
- 前端路由的概念与原理
- php uncaught thrown,PHP异常详解
- wordpress前台编辑文章_9款 WordPress 最美极简主题推荐
- python列表知识点_Python列表知识点
- android全面屏系统哪个版本开始,Android全面屏
- java filestream 包,java.io.FileOutputStream.write(byte[] b)
- NTP客户端通过脚本一键配置