如何单击打开 mat-menu 并关闭其他打开的菜单(如果有)? [英] How to open mat-menu on a single click and close other opened menu if there is any?

问题描述

我被困在这个问题上，当有多个标题菜单时，当我第一次打开菜单时没有问题，但如果已经打开了一个菜单，我点击打开第二个菜单它不起作用.它将首先关闭之前打开的菜单，然后我们必须再次单击以打开新菜单.

I am stuck on this issue that when there a header multiple menu's and when i open a menu first time there is no issue but if there is already a menu opened and i click to open a second menu it doesn't work. it will first close the previously opened menu and then we have to click again to open the new menu.

我想要的是，当我点击一个菜单时，它应该通过单击打开，如果有任何菜单打开，它也会关闭.我在 angular2 材料文档中没有找到任何关于此的内容.

What i want is that when i click on a menu it should open in a single click and if there is any menu opened, it closes too. I haven't found any thing regarding this in angular2 material documentation.

以下是该问题示例的链接:

https://stackblitz.com/edit/angular-8ntb2i

推荐答案

没有简单的方法来解决这个问题，因为当菜单打开时，全屏覆盖也适用.覆盖层旨在检测点击，然后关闭菜单并删除覆盖层.正如您已经猜到的那样，此叠加层可防止点击另一个菜单触发器，并且当另一个菜单已打开时，我们无法打开该菜单.

There is no easy way to solve this issue, because when menu opens, the fullscreen overlay apllies too. The overlay is intended to detect click, then close menu and remove the overlay. As you already guessed, this overlay prevent clicks on another menu trigger and we can't open the menu, when another one is already opened.

作为一种解决方法，您可以执行以下操作:

As a workaround you can do something like this:

捕捉叠加层上的点击事件，获取x和y轴，去除叠加层后，可以查看用户是否想要点击另一个菜单(您可以使用这篇文章中的方法)，如果是这样，请在同一轴上再模拟一次点击.

Catch click event on the overlay, get x and y axis, and after the overlay will be removed, you can check, does user want to click on another menu (you can use method from this post), and if so, simulate another one click at the same axis.

这篇关于如何单击打开 mat-menu 并关闭其他打开的菜单(如果有)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！