Twitter Bootstrap手风琴图标不会改变

Question

我从bootstrap得到这个手风琴的东西.箭头图标指向下方.

然后我点击Competency1,我得到(Competency1 icon up,Competency2 icon down):

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

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

谢谢.

Answer 1

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

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

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');
});

Answer 2

出现这种情况的原因似乎是，当 Competency1 已打开时，单击 Competency2 会折叠 Competency1。由于以这种方式折叠时 Competency1 上没有发生单击事件，因此插入符号仍然指向上方。