使用 <accordion> 将向上/向下箭头添加到引导手风琴答案

【问题标题】：Add up/down arrows to the bootstrap accordion with <accordion>使用 <accordion> 将向上/向下箭头添加到引导手风琴
【发布时间】：2019-09-08 16:30:36
【问题描述】：

我正在使用 angular /typescript 编写一个复杂的 Web 应用程序，并且我想将手风琴用于一些事情。手风琴是使用 typescript/bootstrap 设置的，如下所示：

<accordion>

<accordion-group heading="">

</accordion-group>

</accordion>

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

我尝试使用 :after 伪类和 content: 属性和 css 来渲染手风琴类，但这不起作用。我尝试了很多不同的课程来做到这一点，但没有奏效。有没有简单的方法可以做到这一点？

这是 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;
}

...

【问题讨论】：

哪一个是您用于手风琴的节点模块的名称
您能否提供可行的 stackblitz 代码，帮助我们为您找到解决方案
您可以查看我以前的帖子，检查这是否解决了您的问题，我认为您提供的任何 CSS 都不被接受。 stackoverflow.com/questions/54214998/…

标签： html css angular typescript twitter-bootstrap-3

【解决方案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);
     }

【讨论】：