css - 如何在 Angular 选择时将下拉箭头的方向从右侧更改为向下

Question

当选择打开下拉菜单时，我想将下拉菜单箭头的方向从右更改为向下方向，即向下滑动。

我试过 transform: rotate(45deg) on active 但只有当我选择其中一个子菜单时它才会改变。如何做到这一点？

.sidebar-dropdown {
  >a:after {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: relative;
    left: 130px;
    top: -26px;  
    transition: transform .3s ease;
    border: solid black;
  border-width: 0 3px 3px 0;
  transform: rotate(-45deg);

  padding: 3px;
  }
  .nav-link::selection {
    background-color: #f95353;


  }

  .sidebar-submenu {

    overflow: hidden;

    ul {
      padding: 5px 0;
    }

    li {
      padding-left: 25px;
      font-size: 13px;

    }
  }

  &.active>a:after {
    transform: rotate(45deg);
    right: 15px;
  }

}



<ul class="nav"> 
       <li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true }" *ngFor="let menuItem of menuItems" [ngClass]="{'sidebar-dropdown': menuItem.type==='dropdown'}">
         <a  class="nav-link" [routerLink]="[menuItem.path]" (click)="toggle(menuItem)">
         <p>{{ menuItem.title }}</p>
        </a>
        <div *ngIf="menuItem.type === 'dropdown'" class="sidebar-submenu" [@slide]="getState(menuItem)">
          <ul>
            <li *ngFor="let menudrop of menuItem.submenues"> 
              <a class="nav-link" [routerLink]="[menudrop.path]" routerLinkActive="blue" routerLinkActiveOptions="{exact:true}">{{ menudrop.title}}</a>
            </li>
          </ul>

        </div>
       </li>

     </ul>
export const ROUTES: RouteInfo[] = [
  { path: '', title: 'Dashboard', class: '' },
  { path: '/visit', title: 'Visit Detail', class: ''},
  { title: 'StockYard', class: '', type: 'dropdown', active: false , submenues: [
    {
      title: 'Dashboard',
      path: 'stockdash'
    },
    {
      title: '3rd Party StockYard',
      path: 'party'
    }
  ] 
}
]

toggle(menu) {
    if(menu.type === 'dropdown') {
      ROUTES.forEach(element => {
        console.log(element);
        if (element === menu) {
          menu.active = !menu.active;
          console.log(menu.active);
        } else {
          element.active = false;
        } 
      });
    }

  }

选择打开下拉菜单时，下拉箭头的方向应由右变为向下

Answer 1

我认为您只是错过了在 menuItem 属性之后向 [ngClass] 添加事件类。

尝试:

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true }" *ngFor="let menuItem of menuItems" [ngClass]="{'sidebar-dropdown': menuItem.type==='dropdown', 'active': menuItem.active===true}">