Bootstrap 手风琴图标不适用于折叠状态

Question

我正在使用 Bootstrap V 3.37 制作手风琴。我在手风琴上有图标，这些图标会随着打开和关闭状态而变化。当我将状态设置为collapse in它工作正常。但是当我手风琴没有手风琴collapsed in 时，图标无法正常工作。

图标应该是这样的：

1. 关闭状态下箭头朝下
2. 打开状态时箭头朝上

到目前为止，我的代码如下：

HTML 结构

<!-- Panel list accordion -->
<div class="panel-group">
      <div class="panel-heading-one panel-main-heading-one">
         <h4 class="panel-title panel-main-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
               <img src="../images/image.svg" class="panel-icon">
               <p>Title here</p>
            </a>
         </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
         <div class="panel-body panel-bodymain-one">
            <p>Text body here</p>
         </div>
      </div>
            <div class="panel-heading-one panel-main-heading-one">
         <h4 class="panel-title panel-main-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
               <img src="../images/image.svg" class="panel-icon">
               <p>Title here</p>
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body panel-bodymain-one">
            <p>Title body here</p>
         </div>
      </div>
            <div class="panel-heading-one panel-main-heading-one">
         <h4 class="panel-title panel-main-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
               <img src="../images/image.svg" class="panel-icon">
               <p>Title here</p>
            </a>
         </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
         <div class="panel-body panel-bodymain-one">
            <p>Text body here</p>
         </div>
      </div>
   </div>
</div>
<!-- End panel list accordion -->

CSS

.panel-heading-one .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';
    content: "\e113"; 
    float: right;        
    color: #ffffff;         
    height: 24px;
    width: 40px;
    background-color: #000000;
}

.panel-heading-one .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e114";
}

还附上截图。

关闭状态 - 仍指向上方：

打开状态很好，因为它指向：

任何帮助都会很棒。

Answer 1

将你的 css 更改为：

.panel-heading-one .accordion-toggle:after{
    font-family: 'Glyphicons Halflings';
    content: "\e114"; 
    float: right;        
    color: #ffffff;         
    height: 24px;
    width: 40px;
    background-color: #000000;
}

.panel-heading-one .accordion-toggle[aria-expanded="true"]:after {
        /* symbol for "opening" panels */
        content: "\e113";
    }

.panel-heading-one .accordion-toggle[aria-expanded="false"]:after {
    /* symbol for "collapsed" panels */
    content: "\e114";
}

它会完美运行。

额外：在您的手风琴中，您使用了相同的href='#collapseThree' 最后一项和倒数第二项。当您单击最后一个元素时，它 将打开倒数第二个项目。所以在最后一个元素中更改您的href。