Bootstrap多级菜单的实现代码


Posted in Javascript onMay 23, 2017

最近在用Bootstrap做一个项目的时候遇到一个问题,官网上只给的二级菜单的用法,但是实际运用肯定不止二级。 于是在网上看到一个第三方的工具:bootstrap-submenu,地址:https://github.com/vsn4ik/bootstrap-submenu
可以去下载源码。

将bootstrap-submenu.js和bootstrap-submenu.css文件添加到项目中

在要实现多级导航的按钮或a标签中添加:

<a href="#" rel="external nofollow" class="data-toggle" data-toggle="dropdown" data-submenu>

主要是最后的submenu这个。

然后再JS里面:

$(function () {
 $('[data-submenu]').submenupicker();
});

这样就可以了

以上所述是小编给大家介绍的Bootstrap多级菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
layui-table表复选框勾选的所有行数据获取的例子
Sep 13 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
微信小程序获取用户openId的实现方法
May 23 #Javascript
详解vuex 中的 state 在组件中如何监听
May 23 #Javascript
BootStrap表单控件之文本域textarea
May 23 #Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 #Javascript
vue实现app页面切换动画效果实例
May 23 #Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 #Javascript
JavaScript设置名字输入不合法的实现方法
May 23 #Javascript
You might like
php adodb连接不同数据库
2009/03/19 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
Javascript 对象的解释
2008/11/24 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python多线程http下载实现示例
2013/12/30 Python
python对数组进行反转的方法
2015/05/20 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
Python如何实现邮件功能
2020/05/27 Python
浅析Python面向对象编程
2020/07/10 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
教育专业个人求职信
2013/12/02 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
golang中的空slice案例
2021/04/27 Golang
详解MySQL 联合查询优化机制
2021/05/10 MySQL