Question

我做过同样的事情＆＃34; WeaverSnap＆＃34;在回答this question时说。

我的手风琴就像他发布的JSFiddle一样。

问题是，雪佛龙图标开始处于错误状态，但在其中一个面板切换后自行修复。

这是一个小问题，但我认为可以修复。

这是他提供的CSS :(我改变了＃34; FontAwesome＆＃34;到＆＃34; Glyphicons Halflings＆＃34; BTW）

/* CSS Method for adding Font Awesome Chevron Icons */
 .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    content:"\f077";
    float: right;
    color: inherit;
}
.panel-heading.collapsed .accordion-toggle:after {
    /* symbol for "collapsed" panels */
    content:"\f078";
}

Answer 1

嗯......如果您对此不感兴趣，可以将课程.collapsed添加到每个.panel-heading元素中。所以他们每个人看起来都像这样：

<div class="panel-heading collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
    <!-- Child elements -->
</div>

这个类决定了雪佛龙的面貌。您不必直接在HTML中执行此操作;你可以在页面加载时用jQuery以编程方式完成它，因为你已经加载了它：

$(document).ready(function(){
    $(".panel-heading").addClass("collapsed");
});

这里有一个JSFiddle来演示这个快速修复。

希望这有帮助！如果您有任何问题，请告诉我。

Bootstrap 3手风琴雪佛龙问题

1 个答案: