Twitter Bootstrap accordion icon doesnt change

问题

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.

回答1:

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

回答2:

It appears that this is occurring because clicking on Competency2 collapses Competency1 when Competency1 is already open. Because there is no click event that occurs on Competency1 when it collapses in this manner, the caret is still pointing upward.

回答3:

This is a bug in bootstrap. If you inspect your markup when you toggle one of the headings that has a class of .accordion-toggle it toggles it from having the class collapsed or not. When you click a different heading to the one that is open though it doesn't add the class of collapsed onto the heading of the open element. This fixed it for me:

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

回答4:

You can use this code, for changing the icons.

Script part:

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

});

});

Note: For using this code, in the html part, you have to include both image tags ie. chevron-up and chevron-down.

回答5:

Using jquery.js 1.10.2 and bootstrap-collapse.js v2.3.0, this is a rehash of the above. Upon loading the document, it collapses all items but the first one and then handles susequent show/hide events.

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

来源：https://stackoverflow.com/questions/14882404/twitter-bootstrap-accordion-icon-doesnt-change

标签

twitter-bootstrap

accordion