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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
微信小程序 checkbox使用实例解析
Sep 09 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Python实现控制台输入密码的方法
2015/05/29 Python
python样条插值的实现代码
2018/12/17 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python 命名规范知识点汇总
2020/02/14 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
简历中自我评价分享
2013/10/09 职场文书
合作协议书范本
2014/10/25 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL