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个精彩的专题:

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

Javascript 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
JavaScript函数基础详解
Feb 03 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
Vue中jsx不完全应用指南小结
Nov 01 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 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
You might like
PHP静态成员变量
2017/02/14 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
jQuery live
2009/05/15 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
替换python字典中的key值方法
2018/07/06 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
红旗方阵解说词
2014/02/12 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
小学语文国培研修日志
2015/11/13 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫