如何用Angular或CSS实现Bootstrap 4手风琴下拉箭头状态切换

我来帮你搞定这个手风琴箭头的问题，针对你遇到的纯CSS箭头不显示、Angular ngClass影响所有元素的问题，这里有具体的修复方案和更简洁的实现思路：

一、修复纯CSS箭头不显示的问题 #

你之前的代码里漏掉了伪元素必需的content属性，这是伪元素能显示的核心条件，另外还要优化定位和过渡效果，让箭头更美观。结合Bootstrap手风琴的原生类（比如.collapsed），可以实现无JS的状态切换：

/* 给card-header设置相对定位，让伪元素能相对于它定位 */
.card .card-header {
  position: relative;
}

/* 定义箭头的基础样式 */
.card .card-header:after {
  content: ""; /* 必须添加，伪元素才会渲染 */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg); /* 垂直居中+初始向右箭头 */
  border: 2px solid #f07f09;
  border-width: 0 3px 3px 0;
  padding: 6px;
  transition: transform 0.3s ease; /* 添加平滑过渡动画 */
}

/* 手风琴展开时，按钮会移除.collapsed类，这里切换箭头方向 */
.card .card-header:not(.collapsed):after {
  transform: translateY(-50%) rotate(45deg); /* 展开时变为向下箭头 */
}

二、修复Angular ngClass影响所有元素的问题 #

你之前用了全局的expanded变量，导致所有手风琴项共享同一个状态，点击任何一个都会全部切换。这里有两种修复思路：

思路1：给每个手风琴项维护独立状态 #

在组件里为每个手风琴项定义单独的状态变量，点击时只切换当前项的状态（如果需要手风琴互斥，还可以关闭其他项）：

组件代码：

// 为每个手风琴项定义独立状态
expandedOne = false;
expandedTwo = false;

changeDropdownArrowState(section: string) {
  // 切换当前项的状态
  if (section === 'one') {
    this.expandedOne = !this.expandedOne;
    this.expandedTwo = false; // 可选：互斥关闭其他项
  } else if (section === 'two') {
    this.expandedTwo = !this.expandedTwo;
    this.expandedOne = false; // 可选：互斥关闭其他项
  }
}

HTML代码：

<!-- 第一个手风琴项 -->
<div class="card">
  <div class="card-header" id="headingOne">
    <h2 class="mb-0">
      <button class="btn btn-link btn-block text-left" type="button" 
              data-toggle="collapse" data-target="#collapseOne" 
              [attr.aria-expanded]="expandedOne" aria-controls="collapseOne"
              (click)="changeDropdownArrowState('one')">
        <h1>Personal Details <i [ngClass]="{'right':!expandedOne, 'down':expandedOne}"></i> </h1>
      </button>
    </h2>
  </div>
  <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#retailCliamAccordian">
    <div class="card-body"> some text </div>
  </div>
</div>

<!-- 第二个手风琴项 -->
<div class="card">
  <div class="card-header" id="headingTwo">
    <h2 class="mb-0">
      <button class="btn btn-link btn-block text-left collapsed" type="button" 
              data-toggle="collapse" data-target="#collapseTwo" 
              [attr.aria-expanded]="expandedTwo" aria-controls="collapseTwo"
              (click)="changeDropdownArrowState('two')">
        <h1>Product Details <i [ngClass]="{'right':!expandedTwo, 'down':expandedTwo}"></i> </h1>
      </button>
    </h2>
  </div>
  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#retailCliamAccordian">
    <div class="card-body"> other text </div>
  </div>
</div>

思路2：直接利用aria-expanded属性，无需额外变量 #

Bootstrap会自动更新按钮的aria-expanded属性值，所以可以通过模板引用变量直接读取这个属性，来切换箭头类，完全不需要组件里的状态变量：

HTML代码：

<!-- 第一个手风琴项 -->
<div class="card">
  <div class="card-header" id="headingOne">
    <h2 class="mb-0">
      <button class="btn btn-link btn-block text-left" type="button" 
              data-toggle="collapse" data-target="#collapseOne" 
              aria-expanded="false" aria-controls="collapseOne"
              #btnOne>
        <h1>Personal Details 
          <i [ngClass]="{'right': btnOne.getAttribute('aria-expanded') === 'false', 'down': btnOne.getAttribute('aria-expanded') === 'true'}"></i> 
        </h1>
      </button>
    </h2>
  </div>
  <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#retailCliamAccordian">
    <div class="card-body"> some text </div>
  </div>
</div>

<!-- 第二个手风琴项 -->
<div class="card">
  <div class="card-header" id="headingTwo">
    <h2 class="mb-0">
      <button class="btn btn-link btn-block text-left collapsed" type="button" 
              data-toggle="collapse" data-target="#collapseTwo" 
              aria-expanded="false" aria-controls="collapseTwo"
              #btnTwo>
        <h1>Product Details 
          <i [ngClass]="{'right': btnTwo.getAttribute('aria-expanded') === 'false', 'down': btnTwo.getAttribute('aria-expanded') === 'true'}"></i> 
        </h1>
      </button>
    </h2>
  </div>
  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#retailCliamAccordian">
    <div class="card-body"> other text </div>
  </div>
</div>

三、最优方案：纯CSS利用aria-expanded属性 #

这是最省事的方案，完全不需要任何JS/Angular逻辑，直接通过CSS属性选择器监听aria-expanded的状态，和Bootstrap原生行为完美同步：

.card .card-header {
  position: relative;
}

.card .btn-link:after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  border: 2px solid #f07f09;
  border-width: 0 3px 3px 0;
  padding: 6px;
  transition: transform 0.3s ease;
}

/* 当aria-expanded为true时，旋转箭头为向下状态 */
.card .btn-link[aria-expanded="true"]:after {
  transform: translateY(-50%) rotate(45deg);
}

这个方案既简洁又可靠，不会出现状态不一致的问题，强烈推荐使用！

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