twitter-bootstrap Bootstrap UI - 如何在展开的选项卡上更改手风琴标题图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18663637/
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 UI - How can I change the accordion header icon, on tab expanded?
提问by gelu gara
How can I change the accordion header icon, on tab expanded ?
如何更改手风琴标题图标，在选项卡上展开？
Accordion plunke URL is : http://plnkr.co/edit/7HMhoHk9AWyBAHALgD0P?p=preview
Accordion plunke URL 是：http://plnkr.co/edit/7HMhoHk9AWyBAHALgD0P?p=preview
<accordion-group>
<accordion-heading>
I can have markup, too! <i class="icon-check"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
So basically I want to change the icon-check class to let's say icon-uncheck, when the tab is expanded
所以基本上我想改变图标检查类，让假设选项卡展开时，请说明图标 - 取消选中
回答by Markus K?sel
This should do what you want..
这应该做你想做的..
<accordion-group is-open="$parent.isOpen">
<accordion-heading>
I can have markup, too!
<i ng-class="{'icon-minus':isOpen,'icon-plus':!isOpen}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here's a working plunk:
http://plnkr.co/edit/kxKVsqHa1a64RvOUbVcM?p=preview
这是一个有效的工作：http://plnkr.co/edit/kxKVsqHa1a64RvOUbVcM? p=preview
UPDATE
更新
The above code is not properly working. It collapses/expands all groups in the accordion at once.
上面的代码不能正常工作。它立即折叠/展开手风琴中的所有组。
Have a look at this Plunker for a better solution: http://plnkr.co/edit/RQKAoY04eVj1ysIikRxU?p=preview
看看这个 Plunker 以获得更好的解决方案：http://plnkr.co/edit/RQKAoY04eVj1ysIikRxU?p=preview
回答by Yogesh
For change icon
更改图标
<accordion close-others="true" is-open="group.open">
<accordion-group ng-repeat="group in groups">
<accordion-heading>
<i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>
[{{$index + 1}}] {{group.title}}
</accordion-heading>
{{group.content}}
</accordion-group>
回答by trevtheitroadwilliams
You can maybe try adding a script to your page that targets the accordion-heading class to change the class attribute to your desired icon. maybe you can refer to these posts for some insight into how to do this.
您也许可以尝试向您的页面添加一个脚本，该脚本针对手风琴标题类来更改 class 属性到您想要的图标。也许您可以参考这些帖子以深入了解如何执行此操作。
Twitter Bootstrap accordion icon doesnt change
Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)
