使用<accordion>

Question

我正在使用angular / typescript编写一个复杂的Web应用程序，我想在某些方面使用手风琴。使用typescript / bootstrap设置手风琴是这样的：

<accordion>

<accordion-group heading="">

</accordion-group>

</accordion>

如何在手风琴上添加向上/向下箭头？

我尝试对渲染的手风琴类使用：after伪类和content：属性以及带CSS的CSS，但这没有用。我尝试了很多不同的课程来做到这一点，但是没有用。有没有简单的方法可以做到这一点？

这是HTML：

...

<accordion>

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

...

</accordion>

...

这是无礼的事

...

.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);
     }