Question

当使用带有“悬停”触发器的bs-dropdown时，菜单不会保持足够长的时间以允许用户点击菜单项：

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

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

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

理想情况下，只要鼠标在菜单上，下拉列表就会保持不变，当鼠标离开菜单时，下拉列表会消失。

Answer 1

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

bs-dropdown and trigger hover #638

Answer 2

这是因为当您将鼠标悬停在按钮以关注实际下拉列表时会触发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

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

Answer 3

我正在尝试在自举导航栏上实现下拉列表。在Blade1336的响应中阅读链接的github问题后，我添加了data-container="self"。确实使下拉列表显示足够长的时间以点击下拉列表项。不幸的是，在添加菜单后，菜单下拉项目不再可点击。 data-container="self"也导致了一种稍微不稳定的ui体验。我的代码看起来像这样：

<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>标记仅用于样式目的

使用“悬停”触发器的AngularStrap bs-dropdown不能保持打开足够长的时间

3 个答案: