Question

我在查看旁边菜单的逻辑时遇到了问题。我有一个级联菜单，我需要在一个级联菜单打开时再打开另一个，第一个关闭。打开菜单背后的逻辑就是这个。我只是切换元素，并且工作正常。

if (this.router.url.indexOf('booking') > 0) {
  this.bookingOptions = true;
} else if (this.router.url.indexOf('settings') > 0) {
  this.accountOptions = true;
} else if (this.router.url.indexOf('reports') > 0) {
  this.reports = true;
} else if (this.router.url.indexOf('pricing') > 0) {
  this.pricingOptions = true;
} else if (this.router.url.indexOf('property') > 0) {
  this.propertyOptions = true;
}

我知道当一个人做的时候我需要让别人做错的逻辑，但是每次尝试都没有成功。

Answer 1

为什么不简单地使用CSS？

无论如何，你问，我提供。由于您只想打开一个菜单，因此您应该只使用一个变量。

我假设您的网址以所需的菜单结束，如果没有，请随时更改，或提供一些网址示例，以便我可以更改我的答案：

const menuToOpen = this.router.url.split('/').pop();

在您的HTML中，使用条件来显示它们（如果您想要自定义答案，请再次提供HTML）

<div class="menu" *ngIf="menuToOpen === 'settings'"></div>

当一个元素打开时关闭其他元素

1 个答案: