Twitter Bootstrap手风琴图标未更改 [英] Twitter Bootstrap accordion icon doesnt change

问题描述

我有这个来自手风琴的东西。箭头图标指向向下。

I have this accordion thing from bootstrap. The arrow icons point down.

然后，我单击能力1，我得到（能力1图标上，能力2图标下）：

Then I click on Competency1, I get (Competency1 icon up, Competency2 icon down):

但是，如果我现在单击Competency2，我会得到（Competency1图标为仍在更新，Competency2图标为向上 ）：

But, if I click on Competency2 now, I get (Competency1 icon is still up, Competency2 icon up):

这是引导程序中的错误，还是可以轻松修复？

Is this a bug in bootstrap, or it could be easily fixed?

谢谢。

推荐答案

在看不到您的建议的情况下很难提供建议码。您可能只在'show'事件上触发了图像交换（检查您的js中是否有错字）。

It's hard to offer suggestions without seeing your code. You might be triggering the image swap only on the 'show' event (check for typos in your js).

以下是我用来对我的对象产生相同效果的方法网站：

Here is what I use to create the same effect on my sites:

HTML：

<div class="accordion">
    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #1
            </a>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading"> 
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <i class="icon-chevron-down"></i>
                Collapsible Group Item #2
            </a>
        </div>
    </div>
</div>

JavaScript：

$('.accordion').on('show hide', function (n) {
    $(n.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-chevron-up icon-chevron-down');
});

这篇关于Twitter Bootstrap手风琴图标未更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！