Question

我正在Bootstrap V 3.37中研究手风琴。我的手风琴上有一些图标，它们会随着打开和关闭状态而变化。当我将状态设置为collapse in时，它可以正常工作。但是，当我手风琴没有手风琴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";
}

它将完美运行。

其他：您在手风琴中使用过相同的href='#collapseThree' 最后一个和倒数第二个项目。当您单击最后一个元素时，它将打开倒数第二个项目。因此，请在最后一个元素中更改href。

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

1 个答案: