求助：Angular中实现点击li切换active类、移除同级元素active类的手风琴效果

完全匹配你现有DOM结构的实现逻辑，全程不需要手动操作DOM节点移除兄弟类，依靠Angular内置的响应式绑定机制就能完成交互。

核心实现思路 #

用组件内的状态变量记录当前激活的li索引，模板中通过类绑定语法判断每个li的激活状态、绑定点击事件更新索引：索引匹配时自动给对应li加active-dropdpwn类，不匹配的项自动移除该类，完全符合手风琴的交互要求。

组件逻辑代码（对应.component.ts文件） #

import { Component } from '@angular/core';

@Component({
  selector: 'app-accordion-list',
  templateUrl: './accordion-list.component.html'
})
export class AccordionListComponent {
  // 默认激活索引为0，匹配你现有页面第一个li默认带激活类的初始状态
  currentActiveIndex = 0;

  // 点击li时更新当前激活索引
  setActiveItem(index: number): void {
    this.currentActiveIndex = index;
  }

  // 如果后续需要动态增减列表项，可补充列表数据配置
  itemList = ['Dropdpwn 1', 'Dropdpwn 2', 'Dropdpwn 3', 'Dropdpwn 4', 'Dropdpwn 5'];
}

页面模板代码（对应.component.html文件） #

写法1：完全匹配你现有静态DOM结构 #

不需要改动原有列表的静态结构，直接给每个li加绑定逻辑即可：

<div>
  <ul>
    <li 
      [class.active-dropdpwn]="currentActiveIndex === 0"
      (click)="setActiveItem(0)"
    >Dropdpwn 1</li>
    <li 
      [class.active-dropdpwn]="currentActiveIndex === 1"
      (click)="setActiveItem(1)"
    >Dropdpwn 2</li>
    <li 
      [class.active-dropdpwn]="currentActiveIndex === 2"
      (click)="setActiveItem(2)"
    >Dropdpwn 3</li>
    <li 
      [class.active-dropdpwn]="currentActiveIndex === 3"
      (click)="setActiveItem(3)"
    >Dropdpwn 4</li>
    <li 
      [class.active-dropdpwn]="currentActiveIndex === 4"
      (click)="setActiveItem(4)"
    >Dropdpwn 5</li>
  </ul>
</div>

写法2：适配动态列表的简化写法 #

如果后续列表项会动态调整数量，可以用*ngFor简化模板代码，减少重复绑定：

<div>
  <ul>
    <li 
      *ngFor="let item of itemList; let itemIndex = index"
      [class.active-dropdpwn]="currentActiveIndex === itemIndex"
      (click)="setActiveItem(itemIndex)"
    >{{ item }}</li>
  </ul>
</div>

交互效果说明 #

• 点击任意li时，currentActiveIndex会更新为当前点击项的索引，Angular会自动触发视图更新：只有索引匹配的li会带上active-dropdpwn类，其余所有兄弟li上的该类会被自动移除
• 初始加载时，第一个li会默认带上激活类，和你现有的初始页面状态完全一致
• 不需要写原生DOM操作逻辑（比如查询所有兄弟节点移除类名），完全遵循Angular单向数据流的开发规范，不会出现视图和状态不同步的问题

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