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内的链接，如何在.dropdown-content上“悬空”或“取消”悬停状态？我将链接保留为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 classlist添加此事件...

使用js路由器时隐藏下拉单击

1 个答案: