Twitter Bootstrap 手风琴图标不会改变 [英] Twitter Bootstrap accordion icon doesnt change

问题描述

我从 bootstrap 得到了这个手风琴.箭头图标指向向下.

然后我点击能力1，我得到(能力1图标向上，能力2图标向下):

但是，如果我现在点击 Competency2，我会得到(Competency1 图标仍然向上，Competency2 图标向上):

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

谢谢.

解决方案

如果没有看到您的代码，很难提供建议.您可能仅在 'show' 事件上触发图像交换(检查您的 js 中的拼写错误).

这是我用来在我的网站上创建相同效果的内容:

HTML:

<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>可折叠组项目 #1</a>

<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>可折叠组项目 #2</a>

JavaScript:

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

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

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

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?

Thanks.

解决方案

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