html - 页面加载时 Accordion 图像错误

Question

我在我的 Bootstrap Accordion 上有一个图像，并且有问题。

当页面第一次加载时， Accordion 图像应该是一个向下的箭头，但它显示我的向上箭头。展开 Accordion 时应显示向上箭头。

如果我展开 Accordion ，显然我的图像不会改变，但当它关闭时，它会按预期显示我的向下箭头，然后图像会根据情况向上/向下变化。

我知道有点难以解释。

CSS

.panel-heading a:after
{
    font-family: 'Glyphicons Halflings';
    content: "\e113";
    position: absolute;
    right: 2.5em;
    color: red;
}

.panel-heading a.collapsed:after
{
    content: "\e114";
    color: blue;
}

Accordion HTML

<div id="Generalaccordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#Generalaccordion" href="#GeneralcollapseOne">Sub menus</a>
            </h4>
        </div>
        <div id="GeneralcollapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">One</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Two</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Three</a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

为什么不直接添加 collapsed 类？

Fiddle Working

HTML:

<div id="Generalaccordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#Generalaccordion" href="#GeneralcollapseOne" class="collapsed">Sub menus</a>
            </h4>
        </div>
        <div id="GeneralcollapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">One</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Two</a>
                </div>
                <div class="mobilesubmenurow">
                    <a runat="server" href="/">Three</a>
                </div>
            </div>
        </div>
    </div>
</div>