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下拉列表框的行为。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!