首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap实现下拉菜单多级联动

Posted in Javascript onNovember 23, 2017

本文实例为大家分享了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个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap实现下拉菜单多级联动

- Author -

lg_lin

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 #Javascript
基于Bootstrap实现城市三级联动
Nov 23 #Javascript
bootstrap-Treeview实现级联勾选
Nov 23 #Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 #Javascript
sublime text配置node.js调试(图文教程)
Nov 23 #Javascript
Vue代码分割懒加载的实现方法
Nov 23 #Javascript
初探js和简单隐藏效果的实例
Nov 23 #Javascript
IC-R9500(1) #{}(1) 选择器(1) SQL注入(2) canvas(2) 脏读(2) 外键(1) 克隆(1) 代理(2) 增删查改(1)
You might like
php单例模式实现(对象只被创建一次)
2012/12/05 PHP
php打造智能化的柱状图程序，用于报表等
2015/06/19 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
js实现无缝轮播图
2020/03/09 Javascript
Django中使用group_by的方法
2015/05/26 Python
Python面向对象特殊成员
2017/04/24 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
详解Python字符串切片
2019/05/20 Python
出纳员岗位责任制
2014/02/11 职场文书
《胡杨》教学反思
2014/02/16 职场文书
父母寄语大全
2014/04/12 职场文书
投标承诺函范文
2015/01/21 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2016年国培研修日志
2015/11/13 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android