实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件

bootstrap-dropdown-hover是一款简单实用的可以实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件。原生的Bootstrap下拉列表框只有在鼠标点击时才能打开。该插件对其进行了改进，使它能够在鼠标滑过时打开。

实现这种效果的方式有很多种，但是或多或少会有一些问题存在。最简单方法是操纵CSS类，即不在其父元素上使用.open class，但是这样做在下拉菜单显示的时候就没有了响应。

这个插件通过原生的Bootstrap javascript API来完成下拉菜单在鼠标滑过时的打开操作。没有任何副作用，可以完美的兼容移动手机的Touch事件。

使用方法

首先需要引入jQuery和Bootstrap依赖文件以及jquery.bootstrap-dropdown-hover.min.js文件。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="dist/jquery.bootstrap-dropdown-hover.min.js"></script>                
              

HTML结构

HTML结构可以使用任何标准的Bootstrap下拉列表框的结构。下面是一个标准的单按钮下拉菜单的结构：

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" 
     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
              

初始化插件

可以通过下面的几种方法来初始化该bootstrap插件：

方法一：

$.fn.bootstrapDropdownHover({
  // 配置参数
});                
              

方法二：

$('[data-toggle="dropdown"]').bootstrapDropdownHover({
  // 配置参数
});                
              

如果是一个navbar，可通过下面的方式来初始化：

$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
  // 配置参数
});                
              

配置参数

在调用bootstrapDropdownHover()方法的时候，你可以传入一些可用的配置参数：

• clickBehavior：可选值有：'sticky'|'default'|'disable'。默认值为：sticky。
  • sticky：在打开下拉列表框后，当鼠标离开下拉列表区域时它不会主动关闭，而是要通过鼠标点击才能关闭。
  • default：表示下拉列表既可以通过鼠标滑过打开关闭，也可以通过鼠标点击来打开关闭。
  • disable：只有在鼠标滑过时可以打开关闭下拉菜单，点击不起作用。
• hideTimeout：类型：integer，默认值：200，单位毫秒。在鼠标离开下拉菜单之后多长时间它才会隐藏。

方法

你可以通过调用下面的方法来改变插件的行为。要在任何下拉列表框实例对象上调用方法，使用下面的语法：

$(selector).bootstrapDropdownHover(methodName, parameter);                
              

下面是可用的方法：

• setClickBehavior(value)：改变clickBehavior参数的值。
• setHideTimeout(value)：改变hideTimeout参数的值。

你还可以通过调用destroy()方法来恢复原生Bootstrap下拉列表框的行为。