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 相关文章推荐
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jquery密码强度校验
Dec 02 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
js实现购物车商品数量加减
Sep 21 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
php-fpm中max_children的配置
2019/03/15 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
利用Python实现原创工具的Logo与Help
2018/12/03 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python中类与对象之间的关系详解
2020/12/16 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
struct与class的区别
2014/02/03 面试题
写求职信有哪些注意事项
2014/05/08 职场文书
企业文化标语大全
2014/06/10 职场文书
世界读书日的活动方案
2014/08/20 职场文书
借名购房协议书范本
2014/10/06 职场文书
党的作风建设心得体会
2014/10/22 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
离职信范本
2015/06/23 职场文书
为什么MySQL 删除表数据 磁盘空间还一直被占用
2021/10/16 MySQL