Question

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

Accordion plunke网址为：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>

所以基本上我想改变图标检查类让我们说icon-uncheck，当标签展开时

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

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

<强>更新

以上代码无法正常运行。它立刻折叠/扩展了手风琴中的所有组。

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

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

Answer 3

您可以尝试向您的页面添加一个脚本，该脚本以accordion-heading类为目标，将类属性更改为您想要的图标。也许你可以参考这些帖子，了解如何做到这一点。

Twitter Bootstrap accordion icon doesnt change

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

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

3 个答案: