Question

我已经创建了一个“悬停显示”垫菜单按钮，如您在此处看到的那样：

https://stackblitz.com/edit/angular-show-hide-menu?file=app%2Fshow-hide-menu.scss

问题是，当我单击该按钮时，它消失了，给我留下了一个看起来很奇怪的垫菜单。我尝试使用css定位按钮的活动状态或焦点状态（如示例所示），但这似乎并不能帮助保持活动状态的按钮出现。

在示例中单击按钮时，当按钮处于活动状态时，您会看到蓝色背景闪烁，但是它不会保持蓝色。蓝色背景只是用于调试，但基本上我希望每当单击按钮时（即在选定菜单处于活动状态时）都可以显示“ display：flex” css。

任何帮助都将不胜感激！

-S。阿罗拉

Answer 1

您的“更多选项”按钮消失了，因为菜单打开后该按钮不再处于活动或集中状态。实际上，您不能使其处于活动状态或集中状态，因为菜单会创建一个透明的背景图层，该图层覆盖屏幕上的所有其他内容，您可以在检查HTML时看到它。这就是为什么在菜单打开时无法重新显示按钮的原因。

一种解决方法是观察菜单本身的状态，并在关联菜单打开时向按钮添加一个类：

<button fxFlex="80" mat-icon-button matTooltip="More Options"
    [matMenuTriggerFor]="optionsMenu" class="hover-display"
    #menuTrigger="matMenuTrigger" [ngClass]="{ 'open': menuTrigger.menuOpen }">

然后，您可以在CSS中使用此类，而不用定位活动或集中状态：

.node .hover-display.open {
    display: flex;
}

带有菜单的悬停按钮上显示的问题；单击时活动按钮消失

1 个答案: