Angular如何实现点击菜单项切换上下箭头、展开隐藏子菜单

实现方案 #

你已经定义了控制菜单展开收起的状态变量elementMenu，只需要对现有代码做三处修改即可实现需求：

1. 修改 admin.component.html，新增箭头和子菜单结构

<div class="sidebar">
  <div class="logo-details">
    <i class="bx bxl-c-plus-plus"></i>
    <span class="logo_name">Menu</span>
  </div>
  <ul class="nav-links">
    <li [ngClass]="{ selected: selectedTab === 'market' }">
      <a
        routerLink="market"
        (click)="selectElementMenu(); selectedTab = 'market'"
      >
        <i class="bx bx-grid-alt"></i>
        <span class="links_name">Market</span>
        <!-- 动态切换箭头 -->
        <i class="bx arrow-icon" [ngClass]="elementMenu ? 'bx-chevron-up' : 'bx-chevron-down'"></i>
      </a>
      <!-- 子菜单，根据状态控制显隐 -->
      <ul class="sub-menu" *ngIf="elementMenu">
        <li><a routerLink="market/sub-item1">子选项1</a></li>
        <li><a routerLink="market/sub-item2">子选项2</a></li>
        <!-- 按需添加更多子选项 -->
      </ul>
    </li>
  </ul>
</div>
<section class="home-section">
  <nav>
    <div class="sidebar-button">
      <i class="bx bx-menu sidebarBtn"></i>
      <span class="dashboard">Dashboard</span>
    </div>
  </nav>
  <router-outlet></router-outlet>
</section>

2. 在 admin.component.css 中添加对应样式

.nav-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arrow-icon {
  transition: all 0.2s ease;
}
.sub-menu {
  width: 100%;
  padding-left: 45px;
  list-style: none;
  margin: 6px 0;
}
.sub-menu li {
  margin: 8px 0;
}
.sub-menu li a {
  font-size: 14px;
  opacity: 0.8;
}

3. 如果需要子菜单展开收起有平滑过渡效果，可以把*ngIf换成通过height控制的动画，修改css即可：

.sub-menu {
  width: 100%;
  padding-left: 45px;
  list-style: none;
  margin: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.sub-menu.active {
  height: auto;
  margin: 6px 0;
}

同时把html里的子菜单部分改成：

<ul class="sub-menu" [ngClass]="{active: elementMenu}">

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