Bootstrap 手风琴图标在折叠状态下不起作用

Question

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

图标应该作为：

闭合状态下箭头朝下
打开状态下箭头朝上

目前我的代码如下：

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";
}

它会完美运行。

Extra: In your accordion you have used same href='#collapseThree' for last and second last item. When you will click on last element, it will open second last item. So change your href in last element.

Bootstrap 手风琴图标在折叠状态下不起作用

Bootstrap accordion icons not working on collapsed states

icons

accordion

glyphicons

twitter-bootstrap-3