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 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
php中给js数组赋值方法
Mar 10 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
js实现按座位号抽奖
Apr 05 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
react中使用css的7中方式(最全总结)
Feb 11 Javascript
JS实现li标签的删除
Apr 12 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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来检测proxy
2006/10/09 PHP
php删除指定目录的方法
2015/04/03 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
pyramid配置session的方法教程
2013/11/27 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
烹饪自我鉴定
2014/03/01 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
立案决定书范文
2015/06/24 职场文书
yolov5返回坐标的方法实例
2022/03/17 Python