Question

我正在尝试在我的网站上复制一个简单的可折叠菜单导航栏，但我很难显示具有子元素的菜单项，因此可折叠/可扩展。

我有一个简单的<ul>，每个<li>都是导航元素。其中一些具有子<ul>，当点击父<li>时，应该展开它们。这似乎是一个很好用的菜单方式，但我无法让它工作....

当前HTML：

<nav class="widget-body">
   <ul class="acc-menu">
      <li class="nav-separator"><span>Explore</span></li>
      <li class="hasChild" #configBtn (click)="configBtn.show"><a href="javascript:;"><i class="ti ti-settings"></i><span>Configuration</span></a>
          <ul class="acc-menu" [hidden]="configBtn.show">
              <li><a [routerLink]="['Configuration']">Gloabl settings</a>
          </ul>
      </li>
   </ul>
</nav>

任何人都可以提供帮助 - 看起来这应该可以在不涉及组件的情况下实现。

更新

以上代码无效。现在隐藏了子元素。我似乎无法在本地var configBtn上间谍，因为任何{{configBtn}}的使用都会导致Angular2问题。

很简单，我希望在点击父<li>时显示和隐藏孩子<li>。

解

<li class="hasChild" #configBtn (click)="configBtn.show = !configBtn.show"> <a href="javascript:;"><i class="ti ti-settings"></i><span>Configuration</span></a> <ul class="acc-menu" [hidden]="configBtn.show"> <li><a [routerLink]="['Configuration']">Gloabl settings</a> </ul> </li>

Answer 1

我想你需要

[hidden]="configBtn.show ? true : null"

在hidden更改为configBtn.show但null未更改false时删除hidden="false"。

正如Sasxa已经提到的那样

(click)="configBtn.show = !configBtn.show"

必须使其有效https://plnkr.co/edit/TqAO3Pqsl5NQpL7CzmmI?p=preview

Angular2显示/隐藏子元素

1 个答案: