在bootstrap导航栏中，下拉组件的使用非常频繁，所以本文将介绍bootstrap中的下拉组件来扩展悬停事件，具体如下。

如何实现这个悬停事件，其实是基于下拉组件的点击事件。细心的人会发现，当下拉框出现时，它的父级会有一个open class属性。我们只需要在监听悬停事件时向父类添加或删除打开的类。

strip-hover-drop down . js插件，托管在github上的代码URL:View。

以下是完整的js插件代码：

//引导响应导航栏br；(函数($，window，undefined) { //在jQuery插件的范围之外以//跟踪所有下拉var $ all dropdowns=$()；//如果instantlyCloseOthers为真，那么当一个新的nav项悬停在$ . fn . dropdowhover=function(options){//我们真正关心的元素//是下拉切换的父级$ all dropdowns=$ all dropdowns . add(this . parent())；返回this . each(function(){ var $ this=$(this))。parent()，默认值={ delay: 500，instantlyCloseOthers: true }，数据={ delay: $(this)。数据('延迟')，instantlyCloseOthers: $(这个)。数据(' close-others') }，选项=$。extend(true，{}，默认值，选项，数据)，超时；$ this . hover(function(){ if(options . instantlyloseothers===true)$ all dropdows . remove class(' open ')；window.clearTimeout(超时)；$(这个)。add CLaSS(' open ')；}，function(){ time out=window . settimeout(function(){ $ this . remove class(' open ')；}，options . delay)；});});};$('[data-hover='dropdown']')。DropDownHover()；})(jQuery，这个)；可以看到作者在插件前面加了一个分号。这增加了插件的兼容性，因为最后一个js代码可能还没有写；如果您不在这里添加额外的标记，js可能会出错，因为它没有包装。

可选延迟：(可选参数)是以毫秒为单位的延迟。当鼠标不再在下拉菜单或按钮/导航项中时，是时候关闭下拉菜单了，激活它。默认值为500。InstantlyCloseOthers:(可选参数)是一个布尔值。如果为真，当您开始匹配导航的新选择器时，所有其他下拉菜单将立即关闭。默认值为真。

添加了上面的js代码之后，效果此时无法实现，因为我们需要做另一个步骤，就是给元素添加data-*属性：

Data-hover='dropdown '完整的HTML元素代码：复制的代码如下：a href=' JavaScript 3360'class=' drop down-toggle ' data-toggle=' drop down ' data-hover=' drop down '/a您可以通过数据属性、数据延迟和数据关闭等设置选项。

复制代码如下： a href=' # ' class=' drop down-toggle ' data-toggle=' drop down ' data-hover=' drop down ' data-delay=' 1000 ' data-close-others=' false '/a当然，最简单的方法就是使用css。

[/code]。nav li:hover。下拉菜单{ display: block}[/code]这个代码也可以达到想要的悬停效果，但是如果你在悬停的时候点击一个组件，然后转到悬停的另一个组件，就会出现以下效果：

如果你还想深入学习，可以点击这里学习，然后为你附上两个精彩的话题：Bootstrap学习教程Bootstrap实用教程。

以上是对大家共享的Bootstrap下拉组件的悬停事件的使用方法进行扩展，希望能帮助大家熟练掌握悬停事件。