Question

我有这样的事情：

<div class="panel-group" id="accordion">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                    <img class="icons" src="img/photography.png">
                    <img class="unactive" src="img/arrow.png">
                    </a>
                  </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                  <div class="panel-body collapse-text">text.</div>
                </div>
              </div>

我想将我的图标unactive更改为转换：当展开'有效'时，旋转180度？是否可以仅使用CSS？

PS。我发现了许多类似的主题，但我真的没有找到任何有用的信息。

Answer 1

使用类

更改rotate属性

.panel-title .unactive{
 tranform: rotate 180deg
}
.panel-title .active{
 tranform: rotate 0deg
}

Answer 2

当手风琴关闭时，Bootstrap会添加collapsed课程。用它来旋转CSS中的图标..

.panel-heading .unactive {
    -webkit-transform: rotate(180deg);    
    -moz-transform: rotate(180deg);        
    -o-transform: rotate(180deg);          
    -ms-transform: rotate(180deg);         
    transform: rotate(180deg);             
}

.panel-heading .collapsed .unactive {
    -webkit-transform: rotate(0deg);     
    -moz-transform: rotate(0deg);        
    -o-transform: rotate(0deg);          
    -ms-transform: rotate(0deg);   
    transform: rotate(0deg);       
}

演示：http://www.codeply.com/go/7vCbLaj4LX

折叠处于活动状态时更改图标（bootstrap accordion）

2 个答案: