Bootstrap下拉菜单更改为悬停(hover)触发的方法


Posted in Javascript onMay 24, 2017

Bootstrap下拉菜单默认需要通过点击,才可以打开,在管理系统的开发过程中,使用悬停代替点击能减少一步操作,更人性化。下面是实现方式:

<!DOCTYPE html>
<html>
  <head>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-hover-dropdown/2.0.10/bootstrap-hover-dropdown.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
   data-toggle="dropdown" data-hover="dropdown">
   主题
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">Java</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">
      数据通信/网络
     </a>
   </li>
   <li role="presentation" class="divider"></li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
   </li>
  </ul>
</div>
  </body>
</html>

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

Javascript 相关文章推荐
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
一个网马的tips实现分析
Nov 28 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
js 求时间差的实现代码
Apr 26 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
微信小程序 生命周期函数详解
May 24 #Javascript
很棒的vue弹窗组件
May 24 #Javascript
详解Vue使用命令行搭建单页面应用
May 24 #Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 #Javascript
微信小程序 支付功能(前端)的实现
May 24 #Javascript
微信小程序 选项卡的简单实例
May 24 #Javascript
JS回调函数基本定义与用法实例分析
May 24 #Javascript
You might like
最常用的8款PHP调试工具
2014/07/06 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python 列表(List)操作方法详解
2014/03/11 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python中一行和多行import模块问题
2018/04/01 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
pyqt5实现俄罗斯方块游戏
2019/01/11 Python
Python获取好友地区分布及好友性别分布情况代码详解
2019/07/10 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
extern在函数声明中是什么意思
2014/01/19 面试题
客服实习的个人自我鉴定
2013/10/20 职场文书
幼儿教师研修感言
2014/02/12 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
研修心得体会
2014/09/04 职场文书
布达拉宫导游词
2015/02/02 职场文书