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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
asp.net中System.Timers.Timer的使用方法
Mar 20 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
微信小程序 生命周期函数详解
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时的知识积累总结
2013/06/07 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python使用socket连接远程服务器的方法
2015/04/29 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python读取stdin方法实例
2019/05/24 Python
python实现猜数字游戏
2020/03/25 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
事业单位辞职信范文
2014/01/19 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang