Angular中点击显示/隐藏<ul>菜单：实现仅展开点击项子菜单

嘿，我来帮你搞定这个菜单展开的需求！按照下面的步骤修改代码就能实现仅展开点击菜单项对应的子菜单：

1. 在组件类中添加状态变量 #

首先，在你的组件.ts文件里，新增一个变量用来跟踪当前展开的菜单索引：

// 初始值设为null，表示没有菜单展开
currentExpandedIndex: number | null = null;

2. 更新点击事件方法 #

修改你现有的showsubmenu方法，让它切换当前展开的索引：

showsubmenu(index: number): void {
  // 如果点击的是当前已展开的菜单，就收起；否则展开该菜单
  this.currentExpandedIndex = this.currentExpandedIndex === index ? null : index;
}

3. 修改模板控制子菜单显示 #

回到你的home.html模板，找到子菜单的部分（你代码里的...应该就是子菜单内容），给子菜单添加*ngIf条件判断，只有当当前索引匹配时才显示：

<ul class="navbar-nav">
  <li data-toggle="dropdown" class="nav-item" *ngFor="let page of list;let i = index" id="id{{page.link_id}}">
    <span (click)="showsubmenu(i)">
      {{page.link_name}}
      <i class="iconn" *ngIf="page.flg[0].SHOW_ICON=='YES'">
        <ion-icon name="md-arrow-dropdown"></ion-icon>
      </i>
    </span>
    <!-- 这里是你的子菜单，添加*ngIf条件 -->
    <ul class="submenu" *ngIf="currentExpandedIndex === i">
      <!-- 子菜单选项内容 -->
    </ul>
  </li>
</ul>

原理说明 #

通过currentExpandedIndex这个状态变量，我们可以精准控制哪个菜单的子菜单显示：

• 点击菜单时，更新这个变量为当前索引（或null，实现收起）
• 模板通过*ngIf判断当前索引是否匹配，只渲染对应的子菜单

这样就能实现点击哪个菜单，就展开它的子菜单，其他菜单的子菜单自动收起的效果啦！

内容的提问来源于stack exchange，提问作者user2828442