html - 使用 JQLite 重置 CSS 悬停下拉菜单

Question

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

我们尝试删除并重新添加类(即使在超时后)，但下拉列表再次出现。

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

及相关部分(Angular controller 无内容省略):

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

谢谢!

Answer 1

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