<!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"/> <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:;"><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:;" data-index="1" data-title="一级菜单">一级菜单</a></li> <li class="dropdown-submenu"> <a href="javascript:;" data-index="2" data-title="一级菜单">一级菜单</a> <ul class="dropdown-menu"> <li><a data-index="2-1" href="javascript:;" data-title="二级菜单">二级菜单</a></li> </ul> </li> <li class="dropdown-submenu"> <a tabindex="3" href="javascript:;" data-title="一级菜单">一级菜单</a> <ul class="dropdown-menu"> <li><a tabindex="3-1" href="javascript:;" data-title="二级菜单">二级菜单</a></li> <li class="divider"></li> <li class="dropdown-submenu"> <a href="javascript:;" data-index="3-2" data-title="二级菜单">二级菜单</a> <ul class="dropdown-menu"> <li><a href="javascript:;" 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>
相关推荐
主要为大家详细介绍了Bootstrap实现下拉菜单多级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Bootstrap响应式多级下拉导航菜单基于bootstrap.3.3.6.min.css和jquery-1.11.0.min.js制作,界面简洁,四级下拉导航菜单。
bootstrap2多级下拉菜单,在dropdown.js 的基础上添加jquery.hover ,修改css样式,实现功能
由于业务需要,本代码是由bootstrap 的select改编而成,支持下拉菜单(单选 多选),并且支持有多级菜单,比之前使用3级联动使用方便,代码简单,下载后解压,查看demo.html ,可直接套用.
Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
这是一款基于Bootstrap的炫酷下拉菜单鼠标滑过动画特效jQuery插件。该插件在鼠标滑过Bootstrap dropdown组件的时候,下拉面板会以指定的Animate.css中的CSS3动画出现。
bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件。
基于bootstrap的jQuery多级列表树插件,bootstraptreeview、bootstraptree树形菜单
这是一款基于Bootstrap和Bootsnav的多级导航菜单。该多级导航菜单通过简单的CSS代码来对菜单进行美化,制作鼠标滑过的动画效果。
最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,下面给大家分享下解决方案
bootstrap-submenu 是一款在原生 bootstrap Dropdowns 组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件。原生的 bootstrap 下拉菜单只有一层,通过 bootstrap-submenu 插件,可以生成多级子菜单。
14.Bootstrap下拉菜单.rar
今天我们要为大家分享一款基于jQuery和Bootstrap的垂直手风琴下拉菜单,因为它是Bootstrap风格的,所以外观上绝对可以称得上完美。另外,菜单项在展开的时候,菜单项的内容将会以飞入的动画特效展示出来,同时菜单项...
本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 效果图: – 需要引用bootstrap.min.css和bootstrap.min.css.js – 代码如下 <head> <meta charset="UTF-8"> <...
主要介绍了Bootstrap布局组件教程之Bootstrap下拉菜单的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下