Bootstrap下拉菜单更改为悬停(hover)触发的方法
更新时间：2017年05月24日 15:33:30 作者：lyn0130
这篇文章主要为大家详细介绍了Bootstrap下拉菜单更改为悬停(hover)触发的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
ES6 关键字 let 和 ES5 及关键字 var 的区别解析
var可以穿透控制语句、条件语句这样的作用域，导致变量冲突经常发生，这篇文章主要介绍了ES6 关键字 let 和 ES5 及关键字 var 的区别,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了IE及IE6浏览器中判断JS文件加载成功失败的方法,本文使用vbscript来解决这个问题,需要的朋友可以参考下2015-02-02
这篇文章主要为大家介绍了JS前端开发模拟虚拟dom转真实dom详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下2013-08-08
下面小编就为大家带来一篇详谈JS中数组的迭代方法和归并方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，本篇文章主要介绍了Babel 入门教程学习笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了JS实现留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
css静态滤镜 + A:Hover 效果...2007-05-05
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸，rem单位】
这篇文章主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了JavaScript实现内容滚动与导航标签互动关联方案，主要根据滚动左侧内容，关联激活右侧导航节点展开相应介绍，需要的小伙伴可以参考一下2022-06-06
最新评论