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 相关文章推荐
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
支付宝小程序tabbar底部导航
Nov 06 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
js实现3D照片墙效果
Oct 28 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
JavaScript Event Loop相关原理解析
Jun 10 Javascript
javascript实现多边形碰撞检测
Oct 24 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
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python快速从注释生成文档的方法
2016/12/26 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
Python中pass语句的作用是什么
2016/06/01 面试题
市场营销专业个人求职信范文
2013/12/14 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
教师个人总结范文
2015/02/11 职场文书
高中语文教学反思范文
2016/02/16 职场文书
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
如何在Python中妥善使用进度条详解
2022/04/05 Python