找到你要的答案

Q:Accordion Image Wrong When Page Loads

Q:手风琴形象错当Page Loads

I have and issue with an image I have on my Bootstrap accordions.

When the page first loads the accordion image should be an arrow down but it's displaying my arrow up. The arrow up should be displayed when the accordion is expanded.

If I expand the accordion obviously my image doesn't change but when it closes, it then displays my arrow down as expected and then the image changes as it should do up/down depending on the scenario.

A little hard to explain I know.

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>

我有问题,像我举的手风琴。

当页面第一次加载手风琴图像应该是一个箭头向下,但它显示我的箭头了。当手风琴展开时,箭头应该显示出来。

如果我扩大手风琴显然我的形象并没有改变,但当它关闭,然后显示我的箭头按预期,然后图像的变化,因为它应该做/下取决于场景。

有点难以解释我知道。

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>
answer1: 回答1:

Why don't you just add the collapsed class ?

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>

你为什么不添加倒塌的类?

无聊的工作

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>
css  html5  twitter-bootstrap  css3  twitter-bootstrap-3