css - mouseenter 上的 angular-bootstrap 下拉菜单，并在单击之前防止下拉菜单隐藏。

Question

首先，我知道这个帖子:
Activating bootstrap dropdown menu on hover
Bootstrap Dropdown with Hover
How to make twitter bootstrap menu dropdown on hover rather than click
和其他人一样，但仍未找到正确的解决方案，这是我目前所做的。
首先，我使用了 angular-bootstrap 下拉指令中的 is-open 属性，如下所示:

<span class="dropdown" dropdown is-open="status.isopen">
  <a
    href
    class="dropdown-toggle"
    ng-mouseenter="status.isopen = true"
    ng-mouseleave="status.isopen = false"
  >
    hover me for a dropdown with angular-bootstrap
  </a>
  <ul
    class="dropdown-menu"
  >
    <li ng-repeat="choice in items">
      <a href>{{choice}}</a>
    </li>
  </ul>
</span>

这似乎有效，但出现了 2 个错误:

• 第一个是当下拉切换元素被点击时，下拉菜单消失了，再次点击不会把它带回来你必须鼠标离开，然后鼠标进入下拉切换来获得下拉菜单。
• 第二个是一个 css/html 问题。

通常下拉菜单的常规 css 解决方案是这样的:

<a class="css-dropdown">
  hover here with css.
  <div class="css-dropdown-menu">
    <p>item 1</p>
    <p>item 2</p>
    <p>item 3</p>
  </div>
</a>

注意 dropdown-menu 现在位于 dropdown-toggle 元素内，这意味着当用鼠标从 dropdown-toggle 移动到 dropdown-menu 时，它正在从父级移动到子级，所以基本上我们仍然悬停在下拉切换开关上，因为我们在它的子项中，这意味着下拉菜单仍然可见，另一方面，bootstrap 下拉菜单与 click 事件一起使用，因此将下拉菜单作为下拉菜单的子项-不需要切换，但是现在当有人想要将行为更改为 mouseenter/hover 一旦鼠标离开 dropdown-toggle ，下拉菜单就会消失，所以我们无法再访问 dropdown-menu 元素，这在 plunker

为了修复第一个错误，我只是删除了 dropdown 指令，然后将 is-open 替换为 ng-class 指令，如下所示。
改变这个:

<span class="dropdown" dropdown is-open="status.isopen">

为此:

<span class="dropdown" ng-class="{'open': status.isopen}">

其余部分与修复第一个错误的 plunker 相同。
第二个错误很棘手，因为下拉菜单不再是下拉切换的子级，悬停效果在从切换切换到菜单时不会持续，所以我这样做了。 改变了这个:

<ul class="dropdown-menu">

为此:

<ul
  class="dropdown-menu"
  ng-mouseenter="status.isopen = true"
  ng-mouseleave="status.isopen = false"
>

这样做了，但是当单击它保持打开状态的下拉菜单项时出现了另一个错误，所以我一直通过这样做来进行黑客攻击。 改变了这个:

<li ng-repeat="choice in items">

为此:

<li ng-repeat="choice in items" ng-click="status.isopen = false">

这给了我所需的行为 plunker 。
也就是说，这不是一个好的解决方案，因为这里涉及很多指令以获得简单的视觉效果，我提供的最后一个 plunker 包含一个不涉及 Bootstrap 或 AngularJS 的 css 解决方案，尽管这是必需的行为，但它不是必需的html 结构或视觉结果，我需要的是在下拉切换和下拉菜单之间有一个空间，而不是切换元素的填充只是一个空白空间，这使得 css 解决方案在这种情况下无效。
所以，我的问题是有没有更好的方法来做到这一点，而无需为悬停下拉菜单添加新的插件/库，更干净且易于重用的解决方案？

Answer 1

首先，切换最顶层的父元素(在本例中为 <span>)

<span class="btn-group" dropdown is-open="status.isopen" ng-mouseenter="status.isopen = true" ng-mouseleave="status.isopen = false">
  <a class="btn btn-primary dropdown-toggle" dropdown-toggle>
    Button dropdown <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</span>

这将允许您想要的行为 - 同时仍然允许单击以显示/隐藏菜单 ;-)

但是有一个烦恼:如果您将鼠标光标移动得更慢并通过切换和菜单之间的小间隙，它将隐藏菜单。

所以其次，添加一个小的 CSS 来消除间隙

.dropdown-menu {
    margin-top: 0;
}

查看此 plunker 中的操作.