Twitter bootstrap Twitter引导手风琴图标不变

我从bootstrap买了这个手风琴。箭头图标指向下方

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

但是，如果我现在点击Competency2，我会得到（Competency1图标仍然处于上升状态，Competency2图标处于上升状态）

这是bootstrap中的一个bug，还是很容易修复

---

谢谢。

这似乎是因为当Competency1已经打开时，单击Competency2会折叠Competency1。因为Competency1以这种方式崩溃时不会发生单击事件，所以插入符号仍然指向上方。

如果不看到您的代码，很难提供建议。您可能仅在“show”事件中触发图像交换（检查js中的输入错误）

以下是我用来在我的网站上创建相同效果的方法：

HTML:

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

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

});

});

JavaScript:

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

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

});

});

---

这是引导程序中的一个错误。如果在切换类为的标题之一时检查标记，则“手风琴切换”将切换该类是否折叠。当您单击与打开的标题不同的标题时，尽管它没有将折叠的类添加到打开元素的标题上。这为我解决了这个问题：

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

---

您可以使用此代码更改图标

脚本部分：

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

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部分中，必须同时包含图像标记，即chevron up和chevron down。

使用jquery.js 1.10.2和bootstrap-collapse.js v2.3.0，这是上述内容的重复。加载文档时，它会折叠除第一个项目外的所有项目，然后处理后续的显示/隐藏事件

$(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:

答案1。。。
答案2。。。

您能给我们看一下您的代码吗？答案太棒了。你为我节省了很多时间！：-）我很好奇$（n.target）和$（this）之间是否存在显著差异？