抽奖小程序是什么_Bootstrap完成下拉菜单多级联动

2021-01-11 11:38 jianzhan
Bootstrap实现下拉菜单多级联动       这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单多级联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap实现下拉菜单多级联动的具体代码,供大家参考,具体内容如下

 !DOCTYPE HTML 
 html lang="zh-CN" 
 head 
 meta charset="UTF-8" 
 title Bootstrap 3 的多级下拉菜单示例 /title 
 script type="text/javascript" src="jquery/1.9.0/jquery.js" /script 
 link rel="stylesheet" href="bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" / 
 script type="text/javascript" src="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 
 div 
 div 
 input type="hidden" name="category_id" id="category_id" value="" / 
 div 
 a id="dLabel" role="button" data-toggle="dropdown" 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 /span /a 
 ul 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 
 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 
 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 
 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 
 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 /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" data-title="二级菜单" 二级菜单 /a 
 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"