bootstrap实现二级下拉菜单效果


Posted in Javascript onNovember 23, 2017

本文实例为大家分享了bootstrap实现二级下拉菜单展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 基本的按钮下拉菜单</title> 
 <link href=http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel="stylesheet"> 
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
 <script 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="btn-group"> 
 <button type="button" class="btn btn-default">原始</button> 
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 <span class="caret"></span> 
 </button> 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> 
 <li><a href="#">另一个功能</a></li> 
 <li><a href="#">其他</a></li> 
 <li class="divider"></li> 
 <li class="dropdown-submenu"> 
  <a href="#">More options </a> 
  <ul class="dropdown-menu"> 
  <li> 
   <a href="#">另一个功能1</a> 
  </li> 
  </ul> 
 </li> 
 </ul> 
</div> 
 
 
</body> 
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

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

Javascript 相关文章推荐
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
AngularJS自动表单验证
Feb 01 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
浅谈手写node可读流之流动模式
Jun 01 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 #Javascript
Bootstrap实现下拉菜单多级联动
Nov 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
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
PHP Stream_*系列函数
2010/08/01 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
Smarty保留变量用法分析
2016/05/23 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Python爬取网页信息的示例
2020/09/24 Python
机械绘图员岗位职责
2013/11/19 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
初一学生期末评语
2014/04/24 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android