bootstrap 3 glyphicon swap state on click

问题:

Help, I am looking to have the glyphicon image swap on collapse in bootstrap 3. I found this thread here Bootstrap 3 Collapse show state with Chevron icon This works in jsfiddle but when copied to my own page the collapse works but the icon does not swap from up to down. Is there something I am missing? I have even placed this in a full download version of Bootstrap 3 and the icon fails to swap out. Here is the code:

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
      Collapsible Group Item #1 
    </a><i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
  <div class="panel-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high...
  </div>
</div>
</div>
</div>
</div>

and here is the js:

$('#accordion .accordion-toggle').click(function (e){
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down       glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

回答1:

A coworker of mine just had this problem and pointed me to this question. Here's the solution I gave him:

HTML:

<div class="panel-group move-down" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                <h4 class="panel-title">
                    Collapsible Group Item #1
                    <i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
                </h4>
            </a>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                    Collapsible Group Item #2
                </a><i class="indicator glyphicon glyphicon-chevron-up  pull-right"></i>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
            ...
            </div>
        </div>
    </div>
</div>

JavaScript:

$.fn.accordionChevrons = function() {
    return this.each(function(i, accordion) {
        $(".accordion-toggle", accordion).click(function(ev) {
            var link = ev.target;
            var header = $(link).closest(".panel-heading");
            var chevState = $("i.indicator", header)
                .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
            $("i.indicator", accordion)
                .not(chevState)
                .removeClass("glyphicon-chevron-down")
                .addClass("glyphicon-chevron-up");
        });
    });
};

$('#accordion').accordionChevrons();

This method allows the chevron to be anywhere in the header, so you can also click on the chevron to toggle the panel. It also allows you to have multiple accordions on the same page without the chevrons interfering with each other.