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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
JavaScript中的面向对象介绍
Jun 30 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
Vue.js样式动态绑定实现小结
Jan 24 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中的stdClass类
2014/04/18 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
管理科学大学生求职信
2013/11/13 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
企业总经理任命书
2014/06/05 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
2014年环保工作总结
2014/11/26 职场文书
教师工作态度自我评价
2015/03/05 职场文书
公司周年庆寄语
2019/06/21 职场文书
MySQL基础(一)
2021/04/05 MySQL