javascript - 使用 js 路由器时隐藏点击下拉菜单

Question

鉴于我的 html/css 设置如下:

.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-content {
  display: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<nav>
  <ul>
    <li>
      <div class="dropdown">
        <a href="#">Link</a>
        <div class="dropdown-content">
          <a href="#">sub-link></a>
          <a href="#">sub-link></a>
          <a href="#">sub-link></a>
        </div>
      </div>
    </li>
  </ul>
</nav>

当点击 .dropdown-content 中的链接时，如何“取消触发”或“取消切换”.dropdown 上的悬停状态？我将链接保留为 href="#"，因为这模仿了使用 js 路由器(angular/react/vue)单击链接的行为，其中单击链接实际上并不是页面更改。

所以目前的效果是你点击一个链接，页面发生变化，但是下拉内容保持打开状态。期望的效果是在单击 a 后立即关闭下拉内容。

Answer 1

仅使用附加类，如 .hover:

.dropdown.hover .dropdown-content {
  display: block;
}

html (ng)

<div class="dropdown" ng-class="{ 'hover': ishover }" ng-mouseover="ishover=true">
<a href="#" ng-click="ishover=false">...</a>

或 vanillajs 类列表添加此事件 ...