Bootstrap UI - 如何在展开的选项卡上更改手风琴标题图标？答案

【问题标题】：Bootstrap UI - How can I change the accordion header icon, on tab expanded?Bootstrap UI - 如何在展开的选项卡上更改手风琴标题图标？
【发布时间】：2013-09-10 21:35:57
【问题描述】：

如何在展开的选项卡上更改手风琴标题图标？

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>

所以基本上我想在标签展开时将图标检查类更改为取消图标检查

【问题讨论】：

Bootstrap 可能会在其小部件更改状态时发出一些事件 - 检查手风琴控件的引导文档并更改其中的图标？（这应该是可折叠小部件：getbootstrap.com/2.3.2/javascript.html#collapse）

标签： twitter-bootstrap angularjs

【解决方案1】：

这应该做你想要的..

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

~~这是一个有效的 plunk： http://plnkr.co/edit/kxKVsqHa1a64RvOUbVcM?p=preview~~

更新

上面的代码不能正常工作。它会立即折叠/展开手风琴中的所有组。

看看这个 Plunker 以获得更好的解决方案： http://plnkr.co/edit/RQKAoY04eVj1ysIikRxU?p=preview

【讨论】：

我不是投反对票的人，但该解决方案并不完全有效。您的 plunker 代码只有一个手风琴组，因此它似乎可以工作。有了不止一个，这个解决方案实际上同时打开了所有手风琴组。见：plnkr.co/edit/E5lHAUWngy4HsmlGBMBg?p=preview
谢谢，我不认识这个。摆弄了一段时间后，我找到了解决方案：plnkr.co/edit/RQKAoY04eVj1ysIikRxU?p=preview
我默认得到一个图标。知道如何删除它吗？
@Sana 只需删除带有 i-tag 的行。 <i ng-class="{'icon-minus-sign':groups[$index].open,'icon-plus-sign':!groups[$index].open }"></i>

【解决方案2】：

换图标

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

【讨论】：

【解决方案3】：

您可以尝试将脚本添加到以手风琴标题类为目标的页面中，以将类属性更改为您想要的图标。也许您可以参考这些帖子以了解如何执行此操作。

Twitter Bootstrap accordion icon doesnt change

Adding open/closed icon to Twitter Bootstrap collapsibles (accordions)

【讨论】：