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 相关文章推荐
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
实例浅析js的this
Dec 11 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
node中koa中间件机制详解
Aug 22 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
Javascript文本框脚本实现方法解析
Oct 30 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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
一个查看session内容的函数
2006/10/09 PHP
PHP与SQL注入攻击[三]
2007/04/17 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
JS实现淘宝幻灯片效果的实现方法
2013/03/22 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
python实现数组插入新元素的方法
2015/05/22 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
学年自我鉴定范文
2013/10/01 职场文书
招标授权委托书样本
2014/09/23 职场文书
文明倡议书
2015/01/19 职场文书
团员个人年度总结
2015/02/26 职场文书
创建文明城市倡议书
2015/04/28 职场文书
天那边观后感
2015/06/09 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
详解Python函数print用法
2021/06/18 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android