twitter-bootstrap - Bootstrap 3， Accordion 切换 - 字形默认状态？

Question

谢谢你的帮助。

此解决方案最接近，但默认图标状态是错误的:
Bootstrap 3 Accordion vs jquery UI accordion
和
Bootstrap 3 Collapse show state with Chevron icon
和
http://jsfiddle.net/arunpjohny/p84nw/

需要折叠所有面板的默认状态，并带有正确的折叠图标。下面的代码导致顶部 Accordion 面板展开，但所有图标都显示“展开”状态。

我尝试了一些 .js 来添加/删除类，但没有运气。也玩过.panel-default，不行。

CSS:

.panel-heading .accordion-toggle:after {      
    /* symbol for "opening" panels */        
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: left;
    padding-right: 10px;
    color: grey;
}
.panel-heading .accordion-toggle.collapsed:after {    
    /* symbol for "collapsed" panels */    
    content:"\e080";
}

HTML:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
            </div>
        </div>
    </div>
</div>

Answer 1

想念你几年了。在我今天正在处理的一个项目中遇到了类似的问题。通过将“折叠”类添加到面板标题中并稍微更改 CSS 来解决它。它还可以工作，以便可以在任何地方单击面板标题并触发面板动画。最后，使用 span 而不是anchor，这样不那么凌乱。似乎为我工作。
希望这可以帮助遇到与我相同问题的任何人。

控制板:

    <div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOne"> /*FIX HERE*/
        <h4 class="panel-title">
            <span class="accordion-toggle"> 
                Collapsible Group Item #1
            </span>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse"> /* REMOVED 'in'*/
        <div class="panel-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. .
        </div>
    </div>
</div>

CSS:

     .panel-heading .accordion-toggle:after {
        font-family: 'Glyphicons Halflings'; 
        content: "\e114"; 
        float: right;
        color: #ffffff;
    }
    .panel-heading.collapsed .accordion-toggle:after{ /*2ND FIX HERE*/
        font-family: 'Glyphicons Halflings'; 
        content: "\e080"; 
        float: right; 
        color: #ffffff;
    }