Bootstrap下拉菜单实现鼠标悬停显示

Bootstrap的下拉菜单一直都是需要点击，才会显示出来，可能不太符合大家的使用习惯，可能有的用户都不知道这个可以点击，国外的一个开发者写了一个插件，能将点击事件切换为Hover鼠标悬停事件，这样节约了用户的操作和时间。

Bootstrap下拉菜单鼠标悬停显示

Bootstrap Hover Dropdown是一个非官方的Bootstrap插件，使Bootstrap下拉菜单激活悬停和提供更好的用户体验，当前版本支持最新版的Bootstrap 3，所以不必担心使用兼容的问题。

简介

Bootstrap Hover Dropdown是一个简单的插件使Bootstrap下拉菜单激活悬停和提供更好的用户体验。

下拉框是一个可配置的延迟后驳回。这解决了一个问题，就可以立即关闭你的资产净值因为1px的间隙按钮/资产净值项目之间，激活下拉和实际下拉。这也是通常更好的用户体验，用户不能通过1像素的下拉外处罚，将立即关闭导航无延迟。

注：该HTML标记是与任何其他引导下拉相同。这不会干扰引导的默认激活点击的方法（即这个插件与引导的默认行为相结合的工作，以支持理想的桌面和移动的经验）。

安装方法

你可以下载并解压缩下载包从GitHub。或者，你可以下载文件通过鲍尔（JavaScript的包管理系统）：

这也将自动安装Bootstrap和jQuery插件，如果需要。

一旦你已经下载的文件，在你的代码文件最后引入Bootstrap的js文件（S）即可：

使用方法

就像使用Bootstrap一样，你可以激活它，没有任何的JavaScript，只要添加一个数据属性，你可以让它自动工作。

添加data-hover="dropdown"到你的标签中，如果你已经使用Bootstrap，你可以替换Bootstrap的data-toggle="dropdown"。

您可以通过数据属性设置选项，也可以通过data-delay和data-close-others来设置选项。这是一个标准的例子：

或者，你可以通过JavaScript初始化：

$('.dropdown-toggle').dropdownHover(options);

这没有任何其他配置自启动已经支持此功能菜单也可以。只使用你以前使用的标记。只有顶部的标签需要任何特殊标记为我的插件工作（见适当标记的演示）。

可选参数

delay: (可选参数) 在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目，激活它。默认值 500。
instantlyCloseOthers: (可选参数) 一个布尔值，如果为真，将立即关闭所有其他下拉菜单的使用当您启动一个新的选择器匹配导航。当你有这么近，可以重叠的很好。 默认值 true。
hoverDelay: (可选参数) 开幕前在毫秒的延迟。有些人认为这提高了用户体验，因为它减少了意外的菜单口数量。默认值 0。