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 相关文章推荐
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
js获取图片宽高的方法
Nov 25 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
JavaScript实现密码强度实时验证
Mar 18 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读取javascript设置的cookies的代码
2010/04/12 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
javascript add event remove event
2008/04/07 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Python批量转换文件编码格式
2015/05/17 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
带你认识Django
2019/01/15 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python实现快递价格查询系统
2020/03/03 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
华为的Java面试题
2014/03/07 面试题
J2EE包括哪些技术
2016/11/25 面试题
函授本科自我鉴定
2013/11/03 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
六年级学生评语大全
2014/12/26 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python