html - 使用 <accordion> 将向上/向下箭头添加到自举 Accordion

Question

我正在使用 angular/typescript 编写一个复杂的网络应用程序，我想使用 Accordion 来做一些事情。 Accordion 是用这样的 typescript/bootstrap 设置的:

<accordion>

<accordion-group heading="">

</accordion-group>

</accordion>

如何向 Accordion 添加向上/向下箭头？

我尝试使用 :after 伪类和 content: 带有 css 的属性来渲染 Accordion 类，但这没有用。我尝试了很多不同的类(class)来做到这一点，但没有奏效。有没有简单的方法可以做到这一点？

这是 HTML:

...

<accordion>

 <accordion-group heading="{{'Model.EntityName' | translate}}" [isOpen]="true">

...

</accordion>

...

这是 sass:

...

.panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
  content: "\e114";
  float: right;
  color: grey;
}

...

Answer 1

使用下面的代码并切换“事件”类:

.panel-heading .accordion-toggle:before {
        font-family: 'Glyphicons Halflings';
        content: "\e114";
        float: right;
        transition: all 0.5s;}
     .panel-heading .accordion-toggle.active:before {
         -webkit-transform: rotate(180deg);
         -moz-transform: rotate(180deg);
         transform: rotate(180deg);
     }