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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
js style动态设置table高度
Oct 21 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
JS typeof fn === 'function' &amp;&amp; fn()详解
Aug 22 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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中文字符串截取函数
2013/11/12 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
Python 装饰器使用详解
2017/07/29 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
Python-openCV开运算实例
2020/07/05 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
小学生美德少年事迹
2014/02/02 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
单身证明格式样本
2015/06/15 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
详解Python函数print用法
2021/06/18 Python
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers