Question

我有我的Bootstrap手风琴上的图像问题。

当页面首次加载时，手风琴图像应向下箭头，但它向上显示我的箭头。当手风琴扩展时，应显示向上箭头。

如果我扩展手风琴显然我的图像没有改变但是当它关闭时，它会按预期显示我的箭头，然后图像会根据场景的变化而上下移动。

我知道有点难以解释。

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;
}

手风琴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>

当页面加载时，手风琴图像错误

1 个答案: