Question

切换需要发生两件事（打开和折叠子菜单）需要在li中添加和删除menu-open类，同时应将ul treeview菜单设置为分别显示块或不显示。我正在使用此(click)="myLi.classList.toggle('menu-open');切换菜单打开类，它可以工作，但是如何根据菜单的状态（关闭或打开）将ul的状态更改为显示块或不显示块。我添加了event.stopPropagation（）;在ul内部，以便单击子菜单不会触发任何操作。

   <li #myLi class="treeview" (click)="myLi.classList.toggle('menu-open');">
                <a [ngClass]="{'li-bg':servicesLinkHighlight()}" style="cursor: pointer;">
                    <i class="fa fa-briefcase ic"></i> <span class="d-title">&nbsp;&nbsp;My Services</span>
                    <span class="pull-right-container">
                      <i class="fa fa-angle-left pull-right"></i>
                    </span>
                </a>
                  <ul class="treeview-menu" (click)="$event.stopPropagation();">
                    <li style="cursor: pointer;" (click)="navigate2()"><a>&nbsp;&nbsp;&nbsp; Service-1</a></li>
                  </ul>
                </li>

我尝试过这个方法，它可以工作，但是如果子菜单中有多个li，则对所有对象都无效。

<li #myLi class="treeview" (click)="myLi.classList.toggle('menu-open'); toggleSubMenu()">
            <a [ngClass]="{'li-bg':servicesLinkHighlight()}" style="cursor: pointer;">
                <i class="fa fa-briefcase ic"></i> <span class="d-title">&nbsp;&nbsp;My Services</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
            </a>
              <ul #submenu class="treeview-menu" (click)="$event.stopPropagation();">
                <li style="cursor: pointer;" (click)="navigate2()"><a>&nbsp;&nbsp;&nbsp; Service-1</a></li>
              </ul>
            </li>

.ts

toggleSubMenu() {
  if(this.myLi.nativeElement.classList.contains('menu-open')){
    this.submenu.nativeElement.style.display='block';
  } else {
    this.submenu.nativeElement.style.display='none';
  }
}

如何以角度切换此li ul子菜单

0 个答案: