<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>

请注意,下拉菜单现在位于下拉式切换元素中,这意味着当鼠标从下拉菜单切换到从父级到子级的下拉菜单中移动时,因此基本上我们仍然将鼠标悬停在下拉菜单中,因为我们是在它的小孩中,这意味着下拉菜单仍然可见,另一方面,引导下拉菜单与点击事件一起使用,因此不需要下拉菜单作为下拉菜单切换的小孩,但现在当有人想要在鼠标离开下拉菜单后,将行为更改为鼠标/鼠标悬停.下拉菜单消失,因此我们无法再访问此plunker中显示的下拉菜单元素

为了修复第一个bug,我刚刚删除了dropdown指令,然后用这样的ng-class指令替换了is-open.
更改这个：

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

到这个：

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

其余的都是固定第一个bug的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结构或视觉结果,我需要的是在dropdown-toggle和下拉菜单之间有一个空格,而不是一个空白的空格,这使得CSS解决方案在这种情况下无效.
所以,我的问题是有没有更好的方法来做这个没有添加一个新的插件/库更清洁和轻松可重复使用的解决方案的悬停下拉菜单？