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 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
jquery实现上传文件进度条
2020/03/26 jQuery
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
django model object序列化实例
2020/03/13 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
经销商订货会主持词
2014/03/27 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL