Twitter bootstrap 引导：使用图标折叠/导出问题

我使用了bootstrap JavaScript库，并使它在collapse/expand元素中工作。代码如下所示：

<div id="e_ticket_info" class="e_ticket_font" runat="server" Visible="False">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" style="color:firebrick; font-size: large;">
                        E-TICKET...
                    </a>
                    <i class="icon-large icon-arrow-down"></i>
                </h1>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    Some text...
                </div>
            </div>
        </div>
    </div>
</div>

一些文字。。。

如您所见，我可以显示向下箭头图标。当我单击“手风琴元素”时，文本向下展开，但此时我需要将向下箭头图标切换为向上箭头图标，反之亦然，当单击“手风琴元素”折叠文本以再次显示向下箭头图标时

怎么做？

CSS

/** 
    Created new class toggle arrow that uses the sprite 
    coordinates for the up and down arrows in bootstrap.
**/

.toggle-arrow{
    background-position: -289px -96px;
}

/** 
    This specific selector will cause the toggling
    bootstrap adds and removes the collapsed class on the accordian.
**/

.collapsed .toggle-arrow{
    background-position: -312px -96px;
}

HTML

<!-- Nested the i tag within the a toggle by collapsed -->
<div class="panel-heading">
    <h1 class="panel-title">
        <!-- Initialized a with class="collapsed" -->
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
              style="color:firebrick; font-size: large;" class="collapsed">
            E-TICKET...
            <i class="icon-large toggle-arrow"></i>
        </a>
    </h1>
</div>

---

JS Fiddle:

凯文的答案非常有效！他的答案最棒的一点是，它也适用于Bootstrap 2，这与我找到的其他答案（例如）不同

为了回答您的问题，tesicg，Kevin Bowersox正在使用css精灵技术，利用引导精灵

查看一个链接到一个伟大的工具和精灵的解释

我个人想改用V形图标，所以我修改了Kevin的答案如下：

/** Created new class toggle arrow that uses the sprite 
    coordinates for the up and down arrows in bootstrap. **/
.toggle-arrow{
    background-position: -312px -116px;
}

/** This specific selector will cause the toggling
    bootstrap adds and removes the collapsed class on the accordian. **/
.collapsed .toggle-arrow{
    background-position: -454px -72px;
}

基本上，我所做的是移动“视口”像素（如果愿意的话），以显示精灵的V形部分，而不是向上/向下箭头

我还添加了pull right类，以便图标位于手风琴标题的最右侧，如下所示：

<i class="icon-large toggle-arrow pull-right"></i>

---

谢谢凯文，这帮了大忙

bootstrap库中没有切换箭头类。bootstrap.css中有两个类：。图标箭头向上{背景位置：-289px-96px；}和。图标箭头向下{背景位置：-312px-96px；}@tesicg我知道没有。我创建了这个类，然后使用它根据.collapse的存在来切换箭头图像。当我使用你的代码时发生了什么？当我用引导代码打开页面时，标题“E-TICKET”和向下箭头图标就在那里，这很好。当我点击标题“E-TICKET”之后，文本会展开，但图标保持向下箭头，而不是向上箭头。当我再次单击标题“电子客票”将其折叠时，文本折叠，图标变为向上箭头，这是不正确的。应该有向下箭头图标。因此，图标正在切换，但方式不正确，因为它在第一次单击时没有更改。