3

当使用带有“悬停”触发器的 bs-dropdown 时，菜单的可见时间不够长，无法让用户单击菜单项：

http://plnkr.co/edit/Fi39BdCOqHXnPAgITD01?p=preview

使用延迟会使它以意想不到的方式运行：

http://plnkr.co/edit/Y2Q63DDJEyP9CTPMUfYD?p=preview

理想情况下，只要鼠标在菜单上，下拉菜单就应该一直保持，并在鼠标离开菜单时消失。

4

3 回答 3

2

请参阅此问题以跟踪此问题的进度：

bs-dropdown 和触发悬停 #638

于 2014-11-10T08:47:47.943 回答
1

那是因为当您将鼠标悬停在按钮之外以专注于实际下拉菜单时，会触发hover伪事件。mouseleave相反，您可以尝试提供容器button本身。例子

<button type="button" 
        class="btn btn-lg btn-primary myButton" 
        bs-dropdown="dropdown" 
        data-container=".myButton">Hover to toggle dropdown</button>

在这里，我添加data-container了myButton哪个是我为同一个按钮提供的类。

PLNKR

对隐藏使用延迟是无效的，因为隐藏最终会在指定的延迟之后发生，因为动画排队，因为您将鼠标悬停在按钮之外并且将在延迟后隐藏，因此您应该期望用户足够快选择下拉选项。但是作为一种解决方法，您可以只使用容器，直到为此提供修复。

于 2014-01-22T20:58:18.473 回答
0

我正在尝试在引导的导航栏上实现下拉菜单。在阅读 Blade1336 的回复中链接的 github 问题后，我添加了data-container="self". 这确实使下拉菜单可见的时间足够长，可以单击下拉项目。不幸的是，添加后菜单下拉项不再可点击。data-container="self"也导致了稍微不稳定的用户界面体验。我的代码如下所示：

<li data-match-route="/config*">  
   <a bs-dropdown="configDropdown" data-trigger="hover" data-container="self">Config</a>
</li>

我最终切换了标签并将 bs-dropdown 放在我的<li>标签中，而不是这给了我所需的功能（我的链接可以再次点击）。我的代码现在看起来像这样：

<li data-match-route="/config*" bs-dropdown="configDropdown" data-trigger="hover" data-container="self">
   <a>Config</a>
</li>

*我保留<a>标签只是为了造型

于 2015-06-25T20:53:09.460 回答