angular - 如何单击打开垫子菜单并关闭其他打开的菜单(如果有)？

Question

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

我想要的是，当我点击一个菜单时，它应该在一次点击中打开，如果有任何菜单打开，它也会关闭。我在 angular2 Material 文档中没有发现任何关于此的内容。

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

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

Answer 1

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

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

在叠加层上捕捉点击事件，得到x和y轴，叠加层被移除后，你可以检查，用户是否想点击另一个菜单(您可以使用 this post 中的方法)，如果是这样，请在同一轴上模拟另一次点击。