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 相关文章推荐
JQuery之focus函数使用介绍
Aug 20 Javascript
requireJS使用指南
Apr 27 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
vue如何将v-for中的表格导出来
May 07 Javascript
安装vue-cli的简易过程
May 22 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
pandas删除指定行详解
2019/04/04 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python命令行工具Click快速掌握
2019/07/04 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
反腐倡廉标语
2014/06/24 职场文书
暑假学习心得体会
2014/09/02 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2014年财务科工作总结
2014/11/11 职场文书
德劲DE1105机评
2022/04/05 无线电