如果单击页面链接，请关闭导航菜单

Question

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

现在，如果用户单击其中一个菜单链接，将使用角度路由打开相应的页面：

<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 路由器不会重新加载页面，而只会用选定的子页面替换页面内容。

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

使用特殊的"单击">

• 或"选定"CSS选择器来定义链接是否被单击display: none
• 激活一些重置"CSS状态"的Angular函数(如果存在？((就好像页面会被重新加载一样(
• 编写一个方法以在单击routerLink时关闭所有导航菜单(似乎太复杂了(

您有什么建议吗，哪些提到的方法最适合以及如何实现它？

Answer 1

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

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

在您的 TS 中：

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

这将是一个非常简单的实现。您也可以使用可观察量来执行此操作，例如(为每个鼠标事件发出一个主题(。

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