如果单击页面链接，则关闭导航菜单答案

【问题标题】：Close navigation menu if page link is clicked如果单击页面链接，则关闭导航菜单
【发布时间】：2023-03-31 00:24:01
【问题描述】：

在我的 Angular 8 应用程序中，屏幕顶部存在一个固定导航栏。当用户将鼠标悬停在下拉导航链接上时，将显示一个菜单。

现在，如果用户点击其中一个菜单链接，相应的页面将使用 Angular Routing 打开：

<div class="nav-left">
  <div class="dropdown">
    <a class="menu" routerLink="/home">
      {{'HOME.TITLE' | translate}}
      <span class="icon"><i class="fa fa-fw fa-angle-down"></i></span>
    </a>
    <div class="dropdown-content">
      <a routerLink="/home/welcome">
        <span class="icon"><i class="fa fa-fw fa-home"></i></span>
        {{'HOME.TITLE' | translate}}
      </a>
      <a routerLink="/home/news-blog">
        <span class="icon"><i class="fa fa-fw fa-newspaper-o"></i></span>
        {{'HOME.NEWS_BLOG' | translate}}
      </a>
      <a routerLink="/home/features">
        <span class="icon"><i class="fa fa-fw fa-cubes"></i></span>
        {{'HOME.FEATURES' | translate}}
      </a>
    </div>
  </div>
</div>

我的 SCSS 定义有一个 .dropdown:hover 选择器，只有在悬停时才会显示菜单：

.dropdown {
  .dropdown-content {
    display: none;
  }

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

我想要实现的是当用户点击菜单链接时导航菜单会自动关闭。现在，菜单保持打开状态，因为 Angular Router 不会重新加载页面，而只会用选定的子页面替换页面内容。

在我看来，应该有一个纯 CSS / SCSS 解决方案来解决这个问题，尽管它只适用于一些 TypeScript 代码对我来说没问题。我的想法到目前为止：

如果链接已被点击，则使用特殊的“点击”或“选定”CSS 选择器来定义 display: none
激活一些 Angular 函数（如果存在？）以重置“CSS 状态”（好像页面会重新加载一样）
编写一个方法，在单击routerLink 时关闭所有导航菜单（似乎太复杂了）

您有什么建议最适合上述方法以及如何实现它？

【问题讨论】：

你有codepen或小提琴吗？
与使用 CSS 悬停相反，您可以使用一个类将菜单定义为打开状态，并在 Angular 代码中设置一个监听器（例如，对鼠标悬停做出反应，在模板中使用事件绑定) 使用[ngClass] 添加和删除它。你明白了吗？
@WillAlexander 是的，我认为这值得一试。谢谢！

标签： css angular sass navigation

【解决方案1】：

您的模板中可以有一个监听器，如下所示：

<div class="dropdown" [ngClass]="{'visible': menuVisible}" (mouseover)="toggleMenu()" (mouseout)="toggleMenu()">

在你的 TS 中：

menuVisible = false;
toggleMenu() {
  this.menuVisible = !this.menuVisible;
}

这将是一个非常简单的实现。例如，您也可以使用 Observables 来实现（为每个鼠标事件发出一个 Subject）。

编辑：我完全忘了添加点击监听器部分哈哈！不过我想你明白了！

【讨论】：