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>

注意下拉菜单现在位于下拉切换元素内，这意味着当用鼠标从下拉切换到下拉菜单时，它会从父级移动到子级，所以基本上我们仍然悬停在下拉开关上，因为我们是它的孩子，这意味着下拉菜单仍然可见，另一方面，引导下拉菜单与点击事件一起使用，因此将下拉菜单作为下拉菜单的孩子-不需要切换，但是现在当有人想在鼠标离开下拉菜单时将行为更改为鼠标输入/悬停时，下拉菜单会消失，因此我们不再可以访问下拉菜单元素，这在 @987654324 中可见@

为了修复第一个错误，我刚刚删除了下拉指令，然后将 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 中的操作。

Answer 2

我知道你想要一个解决方案 without adding a new plugin/library，但你（或其他寻求这种行为的人）可能想尝试使用 No Close from Dropdown Enhancements lib 来保持下拉菜单打开，即使在点击其中一个选项：

不要在点击收音机添加类.noclose时关闭菜单。

<div class="btn-group">
  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
      Checked option <span class="caret"></span>
  </button>
  <ul class="dropdown-menu noclose">
      <li>
          <input type="radio" id="gr1_1" name="gr1" value="1">
          <label for="gr1_1">Option 1</label>
      </li>
      <li>
          <input type="radio" id="gr1_2" name="gr1" value="2">
          <label for="gr1_2">Option 2</label>
      </li>
      <li>
          <input type="radio" id="gr1_3" name="gr1" value="3">
          <label for="gr1_3">Option 3</label>
      </li>
  </ul>
</div>

还为悬停问题添加 CSS 解决方案：

.btn-group:hover .dropdown-menu.noclose {
    display: block;
}
.dropdown-menu.noclose {
    margin-top: 0px;
}

当然，不要忘记导入库：

• <script src="./js/dropdowns-enhancement.min.js"></script>
• <link href="./css/dropdowns-enhancement.css" rel="stylesheet"\>

---

对于你的情况，我建议你研究一下Dropdown Enhancements's source code，看看它是如何工作的，也许会找到更合适的解决方案。

Answer 3

尝试将此行添加到您的 css：

.btn-group:hover>.dropdown-menu { display: block; margin-top: 0; }

您必须删除您的 is-open、ng-mouseenter 和 ng-mouseleave 指令。

Answer 4

以下是我在处理同一问题时提出的解决方案。

我使用了一个简单的自定义指令：

• 将mouseenter 和mouseleave 事件绑定到下拉菜单，以便正确显示/隐藏菜单。
• 为下拉菜单动态添加自定义 CSS 类，以防止将光标从按钮移动到菜单时菜单消失。 请注意，此解决方案的优点是不会消除按钮和菜单之间的视觉差距。
• 防止单击按钮时菜单消失。

CSS 规则使用before 伪元素来填充按钮和菜单之间的空隙。我添加了 border 属性，可以取消注释以轻松获得视觉反馈。

.dropdown-hover-menu::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  top: -3px;
  height: 3px;
  /*border: 1px solid black;*/
}

sn-p 的 HTML 结构基于 dropdown section of the angular-ui bootstrap documentation 中的可用示例

angular.module('app', ['ui.bootstrap'])
  .directive('dropdownHover', function() {
    return {
      require: 'uibDropdown',
      link: function(scope, element, attrs, dropdownCtrl) {

        var menu = angular.element(element[0].querySelector('.dropdown-menu')),
          button = angular.element(element[0].querySelector('.dropdown-toggle'));

        menu.addClass('dropdown-hover-menu');

        element.bind('mouseenter', onMouseenter);
        element.bind('mouseleave', onMouseleave);
        button.bind('click', onClick);

        function openDropdown(open) {
          scope.$apply(function() {
            dropdownCtrl.toggle(open);
          });
        }

        function onMouseenter(event) {
          if (!element.hasClass('disabled') && !attrs.disabled) {
            openDropdown(true);
          }
        };

        function onMouseleave(event) {
          openDropdown(false);
        };

        function onClick(event) {
          event.stopPropagation();
        }

        scope.$on('$destroy', function() {
          element.unbind('mouseenter', onMouseenter);
          element.unbind('mouseleave', onMouseleave);
          button.unbind('click', onClick);
        });
      }
    };
  });

.dropdown-hover-menu::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  top: -3px;
  height: 3px;
  /*border: 1px solid black;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="app">
  <div class="btn-group" uib-dropdown dropdown-hover>
    <button type="button" class="btn btn-primary dropdown-toggle">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" uib-dropdown-menu role="menu">
      <li role="menuitem"><a href="#">Action</a>
      </li>
      <li role="menuitem"><a href="#">Another action</a>
      </li>
      <li role="menuitem"><a href="#">Something else here</a>
      </li>
      <li class="divider"></li>
      <li role="menuitem"><a href="#">Separated link</a>
      </li>
    </ul>
  </div>
</div>