mouseenter上的angular-bootstrap下拉列表,并在单击之前保持下拉菜单不被隐藏.

Question

首先,我知道这些帖子:
在悬停时激活bootstrap下拉菜单
使用Hover
进行Bootstrap Dropdown 如何在悬停时使Twitter引导菜单下拉而不是单击
And others,但仍然没有找到正确的解决方案,这是我到目前为止所做的.
首先我使用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>

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

为了修复第一个错误,我刚删除了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结构或视觉结果,我需要的是在下拉切换和下拉菜单之间有一个空格而不是切换元素的填充只是一个空白空间,这使得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，但您（或寻求此行为的其他人）可能想尝试使用下拉增强库中的“不关闭”来保持下拉列表打开，即使在单击其选项之一后也是如此：

单击 radio add class 时不要关闭菜单.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"\>

对于您的情况，我建议您研究下拉增强功能的源代码，看看它是如何工作的，也许找到更合适的解决方案。