twitter-bootstrap - Twitter Bootstrap 手风琴图标没有改变

Question

我从引导程序中得到了这个手风琴的东西。箭头图标指向下方。

然后我点击 Competency1，我得到（Competency1 icon up , Competency2 icon down）：

但是，如果我现在点击 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

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

Answer 3

这是引导程序中的错误。如果您在切换具有 .accordion-toggle 类的标题之一时检查您的标记，它会切换它是否使该类折叠或不折叠。当您单击与打开的标题不同的标题时，尽管它不会将折叠的类添加到打开元素的标题上。这为我修复了它：

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

Answer 4

使用 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：

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

Answer 5

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

脚本部分：

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 部分中，您必须包含两个图像标签，即。雪佛龙向上和雪佛龙向下。