twitter-bootstrap Bootstrap：折叠/展开图标问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19490340/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Collapsing/expading with icons issue
提问by tesicg
I use bootstrap JavaScript library and made it work collapse/expand element. The code looks as following:
我使用引导 JavaScript 库并使其工作折叠/展开元素。代码如下所示：
<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>
As you can see, I was able to show the arrow-down icon. When I click accordion element the text expands down what I wanted, but I need to toggle arrow-down icon to arrow-up icon at that moment and vice versa, when click accordion element to collapse text to show arrow-down icon again.
如您所见，我能够显示向下箭头图标。当我单击手风琴元素时，文本会向下展开我想要的内容，但是我需要在那时将向下箭头图标切换为向上箭头图标，反之亦然，当单击手风琴元素折叠文本以再次显示向下箭头图标时。
How to do it?
怎么做？
采纳答案by Kevin Bowersox
CSS
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
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:http://jsfiddle.net/uBzeZ/1/
JS小提琴：http : //jsfiddle.net/uBzeZ/1/
回答by user2213334
Kevin's answer works great! The great thing about his answer is that it also works with Bootstrap 2, unlike some other answers I have found (e.g. Bootstrap 3 Collapse show state with Chevron icon).
凯文的回答很好用！他的答案的好处在于它也适用于 Bootstrap 2，这与我找到的其他一些答案不同（例如Bootstrap 3 Collapse show state with Chevron icon）。
To answer your question tesicg, what Kevin Bowersox is doing is a css sprite technique, taking advantage of the bootstrap sprite.
为了回答你的问题 tesicg，Kevin Bowersox 正在做的是一种 css sprite 技术，利用了 bootstrap sprite。
Check out http://css-tricks.com/css-sprites/for a link to a great tool and explanation of sprites.
查看http://css-tricks.com/css-sprites/以获得一个很棒的工具和 sprite 解释的链接。
I personally, wanted to use chevron icons instead, so I modified Kevin's answer like so:
我个人想改用人字形图标，所以我修改了凯文的答案，如下所示：
/** 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;
}
Basically, what I did was shift the "viewport" pixels, if you will, to expose the chevron portion of the sprite instead of the up/down arrows.
基本上，我所做的是移动“视口”像素，如果您愿意，可以暴露精灵的 V 形部分而不是向上/向下箭头。
I also added the pull-right class so that the icons are on the far-right of the accordian heading, like so:
我还添加了 pull-right 类，以便图标位于手风琴标题的最右侧，如下所示：
<i class="icon-large toggle-arrow pull-right"></i>
Thanks Kevin, this helped a bunch!
谢谢凯文，这帮了很多忙！
