Twitter的引导手风琴图标并没有改变(Twitter Bootstrap accordion i

我有一个从引导此手风琴的事情。 箭头图标点向下 。

然后，我就Competency1点击，我得到（Competency1图标时 ，图标Competency2 下 ）：

但是，如果我在Competency2单击现在，我得到（Competency1图标仍有上涨 ，Competency2图标上 ）：

这是自举一个错误，或者它可以很容易解决吗？

谢谢。

Answer 1:

很难提供建议，没有看到你的代码。 你可能会仅在“显示”事件（检查是否有错别字的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:

看来，这是发生因为点击Competency2崩溃Competency1时Competency1已经打开。 因为，当它以这种方式崩溃发生在Competency1没有点击事件，光标仍指向上方。

Answer 3:

这是自举一个错误。 如果您检查您的标记，当你切换具有类的标题之一.accordion拨动它不必切换它的类崩溃与否。 当你点击一个不同的标题的一个是开放的，虽然它不类的倒塌添加到开放元素的标题。 这种固定对我来说：

$('.accordion-toggle').click(function() {
    if($(this).hasClass('collapsed')) {
        $('.accordion-toggle').not(this).addClass('collapsed');
    }
});

Answer 4:

您可以使用此代码，改变图标。

脚本部分：

jQuery('document').ready(function() {

$('.accordion').on('show hide', function (n) {
    var targetEle = $(n.target).siblings('.accordion-heading').find('.accordion-toggle');
    if($(n.target).hasClass("in")){
        targetEle.children(".icon-chevron-down").show();
        targetEle.children(".icon-chevron-up").hide();
    }
    else{
        targetEle.children(".icon-chevron-down").hide();
        targetEle.children(".icon-chevron-up").show();
    }

});

});

注意：使用此代码，在HTML的一部分，你必须同时包括图像标签，即。 雪佛龙公司，并字形下来。

Answer 5:

使用的jquery.js 1.10.2和自举-collapse.js V2.3.0，这是上述的一个翻版。 在装载文档时，它缩短了所有项目，但第一个，然后处理susequent显示/隐藏事件。

$(document).ready(function () {

    $(".accordion-body").on("shown", function (evt) {
        setIcon(evt.target, true);
    });

    $(".accordion-body").on("hidden", function (evt) {
        setIcon(evt.target, false);
    });

    $(".accordion-body").collapse("hide");
    $("#collapse-faq-1").collapse("show");
});

function setIcon(acdBody, isShown) {
    var indicator = "indicator" + acdBody.id.substr(acdBody.id.lastIndexOf("-"));

    if (!isShown) {
        $("#" + indicator).removeClass("icon-chevron-up").addClass("icon-chevron-down");
    } else {
        $("#" + indicator).removeClass("icon-chevron-down").addClass("icon-chevron-up");
    }
}

HTML：

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-1">
                <i id="indicator-1" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 1
            </a>
        </div>
        <div id="collapse-faq-1" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 1 ...
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse-faq-2">
                <i id="indicator-2" class="icon-chevron-down"></i>&nbsp;&nbsp;
                FAQ Item 2
            </a>
        </div>
        <div id="collapse-faq-2" class="accordion-body collapse in">
            <div class="accordion-inner">
                Answer 2 ...
            </div>
        </div>
    </div>
</div>

文章来源: Twitter Bootstrap accordion icon doesnt change