如何单击打开菜单并关闭其他打开的菜单(如果有的话)? [英] 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.

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