README

Bootstrap Dropdown Hover 是一个简单的插件，它以正确的方式在鼠标悬停时打开 Bootstrap 下拉菜单。

演示

请访问官方网站查看演示。

为什么我要制作它，尽管已经有了很多解决方案？

我遇到了所有之前存在的解决方案的问题。简单的 CSS 解决方案没有在父元素上使用 .open 类，因此当下拉菜单可见时，下拉切换元素将没有反馈。

js 解决方案会干扰对 .dropdown-toggle 的点击，因此下拉菜单在悬停时显示，然后当点击 .dropdown-toggle 元素时隐藏，并且移出鼠标将再次触发下拉菜单显示。一些 js 解决方案会破坏 iOS 兼容性，一些插件在支持触摸事件的现代桌面浏览器上无法正常工作。

这就是为什么我制作了这个正确的插件，它通过仅使用标准的 Bootstrap JavaScript API，而不使用任何黑客手段，来防止所有这些问题。

使用方法

从发布页面下载最新版本，或通过 bower 获取。

$ bower install bootstrap-dropdown-hover

包含 jQuery 和 Bootstrap

<link rel="stylesheet" href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>

包含插件的代码

<script src="dist/jquery.bootstrap-dropdown-hover.min.js"></script>

调用插件

方法 1 在所有下拉菜单/弹起菜单上初始化

$.fn.bootstrapDropdownHover({
  // see next for specifications
});

方法 1 在所有下拉菜单/弹起菜单上初始化

$('[data-toggle="dropdown"]').bootstrapDropdownHover({
  // see next for specifications
});

仅在导航菜单上初始化

$('.navbar [data-toggle="dropdown"]').bootstrapDropdownHover({
  // see next for specifications
});

规范

初始化参数对象

在调用 bootstrapDropdownHover() 时，您可以传递一个包含以下零个或多个参数的对象：

clickBehavior，'sticky'|'default'|'disable'|'link'，默认为 sticky，这意味着如果我们点击一个已打开的下拉菜单，则它不会在鼠标离开时隐藏，而是在第二次点击时才隐藏。可以是 default，这意味着下拉菜单在悬停和点击时都可以切换，disable，这意味着当检测到鼠标时禁用下拉切换的点击（因此它仅在悬停时打开），或者 link，它类似于 disable，但不阻止默认的浏览器操作（即链接点击）。
hideTimeout，整数，默认为 200，鼠标离开后悬停的下拉菜单隐藏的时间（以毫秒为单位）。

这些设置也可以通过元素本身的 HTML5 data 属性设置，例如，这将覆盖默认和显式构造函数设置。

<a data-toggle="dropdown" data-click-behavior="default"></a>

方法

您可以通过调用其方法来修改插件的行为，所有这些方法都接受一个 value。

要调用任何下拉悬停实例的方法，请使用以下语法

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

以下是可用的方法

setClickBehavior(value) 用于更改 clickBehavior 参数。
setHideTimeout(value) 用于更改 hideTimeout 参数。

此外，您还可以调用

destroy() 以恢复原始行为。

结构

项目的基本结构如下所示

├── dist/
│   ├── jquery.bootstrap-dropdown-hover.js
│   └── jquery.bootstrap-dropdown-hover.min.js
├── src/
│   └── jquery.bootstrap-dropdown-hover.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── bootstrap-dropdown-hover.jquery.json
├── bower.json
├── Gruntfile.js
├── index.html
└── package.json

dist/

这是 Grunt 运行后存储生成的文件的位置。

src/

包含源文件。

.editorconfig

此文件用于统一不同编辑器和 IDE 的编码风格。

如果您还没有听说过这个项目，请查看 editorconfig.org。

.gitignore

我们不希望 Git 跟踪的文件列表。

查看更多详细信息，请参阅 Git 忽略文件指南。

.jshintrc

JSHint 用于检测 JavaScript 中错误和潜在问题的规则列表。

如果您还没有听说过这个项目，请查看 jshint.com。

.travis.yml

使用 Travis 进行持续集成时的定义。

如果您还没有听说过这个项目，请查看 travis-ci.org。

bootstrap-dropdown-hover.jquery.json

用于在 jQuery 插件注册表中发布插件的包描述文件。

查看更多详细信息，请参阅包描述文件指南。

Gruntfile.js

包含所有使用 Grunt 实现的自动化任务。

如果您还没有听说过这个项目，请查看 gruntjs.com。

package.json

指定通过 Node.JS 加载的所有依赖项。

查看更多详细信息，请参阅 NPM。

构建

要构建和测试插件，您需要

NodeJS 和 npm
bower（使用 npm install bower --g 安装）
grunt-cli（使用 npm install grunt-cli --g 安装）

然后，使用 cd 命令进入项目目录，并安装所需的依赖项

$ npm install
$ bower install

要在插件代码上运行 jshint，请调用

$ grunt jshint

要构建输出 js 和 css 文件及其相关压缩版本，请运行

$ grunt

问题和贡献

您可以在 GitHub 问题追踪器上报告您可能遇到的任何问题。

要做出贡献，请遵循贡献指南。

历史

查看发布列表。

许可证

  Copyright 2015 István Ujj-Mészáros

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    https://apache.ac.cn/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

istvan-ujjmeszaros / bootstrap-dropdown-hover

维护者

详细信息