使用 JQLite 重置 CSS 悬停下拉菜单答案

【问题标题】：Reset CSS hover dropdown with JQLite使用 JQLite 重置 CSS 悬停下拉菜单
【发布时间】：2016-08-27 10:59:05
【问题描述】：

我目前正在开发一个 Angular SPA 的项目，该 SPA 在其主导航栏中具有下拉菜单。为了获得这种效果，我们使用了 CSS：悬停选择器。问题是，当在此下拉列表中执行操作时，我们希望在不妨碍再次打开它们的情况下关闭它们。例如，如果用户在其中一个下拉列表中打开一个链接（带有 ui-sref 的内部链接），他就会进入这个特定状态，但下拉列表仍然可见，直到他将鼠标移到它之外（并且部分遮盖了显示新内容）。我们希望在执行其中的操作时关闭下拉菜单，如果用户想再次打开它，他将能够再次将鼠标悬停在触发器上。

我们尝试删除和重新添加类（即使在超时后），但下拉菜单再次出现。

链接到具有类似于我们正在尝试完成的设置的 Plunker：https://plnkr.co/edit/qzQk4r2WQFhwsgUWug39?p=preview

以及相关部分（Angular 控制器因为没有内容而省略）：

HTML：

 <div class="hoverable has-dropdown">
  <button class="dropdown-trigger">Hover me!</button>
  <div class="dropdown">
    Dropdown content
    <button ng-click="buttonAction()">Action</button>
  </div>
</div>

CSS：

.dropdown {
  display: none;
  position: absolute;
  top: 20px;
  width: 100px;
  height: 100px;
  background: lightgrey;
  padding: 1em;
}

.has-dropdown {
  position: relative;
  height: 20px;
}

.has-dropdown .dropdown-trigger:hover + .dropdown,
.has-dropdown .dropdown-trigger + .dropdown:hover {
  display: block;
}

谢谢！

【问题讨论】：

标签： html css angularjs hover jqlite

【解决方案1】：

最后通过使用 ng-mouseter 和 ng-mouseleave 并删除 CSS :hover 规则解决了这个问题。由于一切都是基于 JS，我可以在我想关闭它们时触发 mouseleave。

【讨论】：