README

名称变更

Twitter Bootstrap 现在仅称为 Bootstrap，我已经将此仓库的名称更改为 重命名了文件，并将文档/示例中的所有 Twitter Bootstrap 引用更改为仅 Bootstrap，以反映这一点。

实际上没有更改代码，因此我保留当前版本（在撰写本文时为 2.0.1），但请注意，JS文件的开始处缺少 twitter-，这可能影响您。

为任何不便之处表示歉意！

已更新以支持Bootstrap 3

我已使用Bootstrap 3更新了示例，同时删除了与子菜单（Bootstrap 3 不支持）和触控设备相关的代码（只需确保您有 data-toggle="dropdown"，以便移动端能够正常工作，并且我的插件不会干扰）。

简介

一个简单的插件，用于使Bootstrap下拉菜单在悬停时激活，并提供良好的用户体验。

下拉菜单将在可配置的延迟后关闭。这解决了由于激活下拉菜单的按钮/导航项与实际下拉菜单之间的1像素间隙而导致导航立即关闭的问题。这通常也是一种更好的用户体验，因为用户不会因为超出下拉菜单1像素而受到惩罚，这会立即关闭导航而没有延迟。

注意：HTML标记与任何其他Bootstrap下拉菜单相同。这不会干扰Bootstrap的默认激活单击方法（即，此插件与Bootstrap的默认行为结合得很好，可以很好地支持桌面和移动端的理想体验）。

安装

您可以直接下载并解压缩从GitHub下载的包。或者，您可以通过 Bower（一个JavaScript包管理工具）下载文件

bower install bootstrap-hover-dropdown

，如果需要，它还将自动安装Bootstrap和jQuery。

一旦您下载了文件，请在代码中链接到文件，但在您包含主要的Bootstrap JS文件之后。

<!-- script order matters! -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>

使用方法

就像在Bootstrap中一样，您可以通过添加data-attribute来激活它而无需任何JavaScript，只需添加data-attribute，您就可以让它自动工作。

除了Bootstrap的 data-toggle="dropdown" 之外（或代替它），添加 data-hover="dropdown"。

您也可以通过data-attribute设置选项，例如通过 data-delay 和 data-close-others。以下是一个标记示例

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
        Account <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">My Account</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Change Email</a></li>
        <li><a tabindex="-1" href="#">Change Password</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Logout</a></li>
    </ul>
</li>

或者，您可以通过JavaScript进行初始化

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

这也可以与子菜单配合使用，而无需进行其他配置，因为Bootstrap已经支持此功能。只需像以前一样使用标记即可。只需顶级锚标记需要特殊标记才能使我的插件正常工作（请参阅示例以获取适当的标记）。

选项

延迟： (可选) 毫秒延迟。这是在鼠标不再悬停在下拉菜单或激活它的按钮/导航项上之前关闭下拉菜单的时间。默认为 500。
instantlyCloseOthers: (可选) 一个布尔值，当为true时，将在激活新导航时立即关闭所有与选择器匹配的其他下拉菜单。这在下拉菜单紧密排列且可能重叠时很有用。默认值为 true。
hoverDelay: (可选) 在打开之前延迟的毫秒数。有些人认为这可以提高用户体验，因为它减少了意外打开菜单的次数。默认值为 0。

演示

您可以在我的网站上查看此插件的演示：[http://cameronspear.com/demos/bootstrap-hover-dropdown/](http://cameronspear.com/demos/bootstrap-hover-dropdown/)

关于选择选择器的注意事项

此插件故意允许您选择一个选择器（而不是将此应用于具有.dropdown-toggle类的所有元素）。这样，您可以选择性地将其应用于您想要的位置。也许您只想在主导航中使用它，而不希望在主内容中的下拉按钮上激活它。您可以为通常获得.dropdown-toggle的项添加一个类，并使用此插件和该类轻松实现，或者使用如.main-nav .dropdown-toggle之类的选择器。

重要：Bootstrap依赖于与.dropdown-toggle类相关的样式（如三角符号颜色），因此建议您不要更改该类。

变更/错误修复

我是个懒人，从2013年3月开始才开始跟踪变更/错误修复。

2015-12-01 [v2.2.1] 更新README
2015-12-01 [v2.2.0] 新逻辑：当导航栏折叠时不执行任何操作
2015-02-07 [v2.1.3] 更新JS文件中的版本
2015-02-07 [v2.1.2] 忘记压缩最后几个更新...
2015-02-07 [v2.1.1] 合并了另一个PR：browserify兼容性#100。
2015-02-07 [v2.1.0] 合并了几个PR：ARIA支持#95和hover延迟支持#99。
2014-06-16 添加到composer的包。
2014-05-12 修复了您可以点击父菜单项来关闭它，但从它移开会重新打开菜单的问题。还清理了一些代码，删除了一些冗余。
2014-01-27 修复了在移动设备上链式操作会中断的问题，并清理了插件触发事件的方式。还清理了演示（修复了导航栏的外观）。
2013-12-05 将所有关于Twitter Bootstrap的引用更改为Bootstrap，以反映Bootstrap名称的变化。
2013-11-09 禁用此插件，以支持触摸的设备。此插件导致某些移动设备出现问题，并且对于它们来说并不必要。
2013-08-02 添加对Bootstrap 3的支持。对于Bootstrap 2.x.x，请使用bootstrap-2.x.x分支。
2013-06-10 打开新的子菜单时，始终立即关闭兄弟子菜单。问题#19。
2013-06-10 对上次修复的修复，有时会导致应触发正确项时未触发。问题#18。
2013-05-08 修复了一个问题，即兄弟项可以打开不属于它们的下拉菜单。问题#18。
2013-04-29 添加了对子菜单的支持：子菜单现在应该遵守延迟选项并在关闭之前进行。它们不遵守instantlyCloseOthers选项，因为它并不真正相关。
2013-04-19 修复了当您在页眉中包含脚本时，条件规则以禁用移动设备的hover不起作用的问题。
2013-04-03 如果您正在使用响应式CSS，并且在平板/手机视图中，禁用hover。
2013-03-16 修复了通过方法调用传入的选项完全被忽略的问题。

贡献

感谢所有为这个项目做出贡献的人，无论是通过代码贡献，还是通过提交问题来帮助改进它。当然，特别是那些通过代码贡献的人 =)

特别感谢Mattia Larentis。他不在贡献者名单中，但他帮助我想出了数据属性的创意，并通过对象实现选项。

我还会在README中特别感谢那些帮助设置测试套件的人！

路线图

由于这个插件在简单性上几乎就是我想要的样子，所以我并不计划实现任何新功能。一个例外：我希望调整它，使得当你在子菜单中时，你悬停在其外部时，它不会立即关闭。 更新：我在2013年4月底添加了这一功能。

如果你有新功能的想法或者类似的东西，欢迎与我分享，但我很可能不会在没有非常充分的理由的情况下实施它/合并你的拉取请求。你完全可以自由地创建分支并自己实现该功能，以供自己和他人使用。

当然，这并不包括错误。如果你有一个错误，请告诉我，我会尝试修复它。请注意，93.7%的问题是由不正确的标记引起的，所以请首先检查这一点。

关于我

在Twitter上关注我：@CWSpear 或者查看我的博客。

cwspear / bootstrap-hover-dropdown

维护者

详细信息