Bootstrap实现下拉菜单多级联动
2017-11-23 09:57
876 查看
本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码,供大家参考,具体内容如下
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单示例</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" /> <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <style type="text/css"> .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="form-group"> <input type="hidden" name="category_id" id="category_id" value="" /> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-white" data-target="#" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span id="select-title">选择分类</span> <span class="caret"></span></a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="1" data-title="一级菜单">一级菜单</a></li> <li class="dropdown-submenu"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="2" data-title="一级菜单">一级菜单</a> <ul class="dropdown-menu"> <li><a data-index="2-1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="二级菜单">二级菜单</a></li> </ul> </li> <li class="dropdown-submenu"> <a tabindex="3" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="一级菜单">一级菜单</a> <ul class="dropdown-menu"> <li><a tabindex="3-1" href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-title="二级菜单">二级菜单</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="3-2" data-title="二级菜单">二级菜单</a> <ul class="dropdown-menu"> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-index="3-2-1" data-title="三级菜单">三级菜单</a></li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </div> </body> </html> <script type="text/javascript"> $('.dropdown li a').click(function(){ console.log(this); title = $(this).attr("data-title"); id = $(this).attr("data-index"); $("#select-title").text(title); $("#category_id").val(id); }) </script>
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- EXCEL如何实现多级联动下拉菜单
- Bootstrap 下拉菜单多级联动
- Yii实现的多级联动下拉菜单
- javascript实现多级联动下拉菜单的方法
- 用ajax、JSP和Servlet实现多级下拉菜单无刷新联动
- javascript实现多级联动下拉菜单的方法
- 基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
- 最简单js代码实现select二级联动下拉菜单(测试通过)
- js实现多级联动下拉框
- Bootstrap~多级导航(级联导航)的实现
- bootstrap多级下拉菜单
- 用Jquery实现多级下拉框无刷新的联动
- 多级联动系列——ajax调用XML实现三级联动
- JS实多级联动下拉菜单类,简单实现省市区联动菜单!
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法
- 多级联动系列——ajax调用XML实现三级联动
- Android 的 Spinner下拉菜单如何实现 和二级以上的三级联动 (一)
- Bootstrap multiselect多选联动的实现
- 实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
- Android开发——使用Gallery实现“多级联动”