Bootstrap 3 手风琴雪佛龙问题

Question

我做了与“WeaverSnap”在回复this question 时所说的相同的事情。

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

问题是，V 形图标以错误的状态开始，但在其中一个面板被切换后会自行修复。

这是一个小问题，但我认为它可以解决。

这是他提供的 CSS：（顺便说一句，我将“FontAwesome”更改为“Glyphicons Halflings”）

/* 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>

这个类决定了 V 形的朝向。您不必直接在 HTML 中执行此操作；您可以在页面加载时使用 jQuery 以编程方式执行此操作，因为您已经加载了该页面：

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

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

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