How to reference and animate repeated glyphicon-chevron in bootstrap accordion in html table

问题

I am a JavaScript novice and absolute newbie to Twitter Bootstrap. I have repeating rows in a table, each of which requires a drop-down accordion to reveal further information in a new table.

I have this working, but want to have animated up and down chevrons to indicate clearly when a main-table row's accordion is collapsed or expanded. My trouble is that I don't know how to reference each row's glyphicons separately (by name/id): at the moment, all glyphicons change in unison.

My code is given below, and in JSFiddle here: http://jsfiddle.net/leComte/7T2p3/2/. If anyone can spot any other glaring inconsistencies or bad coding practice, please give me a heads-up on that too! :-)

<div id="OrderPackages">
    <table id="tableSearchResults" class="table table-hover  table-striped table-condensed">
        <thead>
            <tr>
                <th>Package ID</th>
                <th>Quantity</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">
                <td>123456</td>
                <td>3</td>
                <td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>

                </td>
            </tr>
            <tr>
                <td colspan="3" class="hiddenRow">
                    <div class="accordion-body collapse packageDetails1" id="accordion1">
                        <table>
                            <tr>
                                <td>Revealed item 1</td>
                            </tr>
                            <tr>
                                <td>Revealed item 2</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails2">
                <td>654321</td>
                <td>2</td>
                <td><i class="indicator glyphicon glyphicon-chevron-up pull-right"></i>

                </td>
            </tr>
            <tr>
                <td colspan="3" class="hiddenRow">
                    <div class="accordion-body collapse packageDetails2" id="accordion2">
                        <table>
                            <tr>
                                <td>Revealed item 1</td>
                            </tr>
                            <tr>
                                <td>Revealed item 2</td>
                            </tr>
                            <tr>
                                <td>Revealed item 3</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr></tr>
        </tbody>
    </table>
</div>

$('#accordion1').on('shown.bs.collapse', function () {
    $("i.indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('#accordion1').on('hidden.bs.collapse', function () {
    $("i.indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

$('#accordion2').on('shown.bs.collapse', function () {
    $("i.indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('#accordion2').on('hidden.bs.collapse', function () {
    $("i.indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

回答1:

A quick way to accomplish this would be adding an id to the parent rows. For example, the first parent row would look like this:

<tr id="package1" class="accordion-toggle" data-toggle="collapse" data-parent="#OrderPackages" data-target=".packageDetails1">

And this is how the JS would look like for this first row:

$('#accordion1').on('shown.bs.collapse', function () {
    $("#package1 i.indicator").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
$('#accordion1').on('hidden.bs.collapse', function () {
    $("#package1 i.indicator").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

You can take a look at the final result here: http://jsfiddle.net/7pwg1j5f/

Assuming you will only have 2 rows you could do this, otherwise I would start looking into a more generic way to pull this off (e.g. using classes and CSS rules to show one glyphicon or another one based on the "collapsed" class).

来源：https://stackoverflow.com/questions/25207549/how-to-reference-and-animate-repeated-glyphicon-chevron-in-bootstrap-accordion-i

标签

twitter-bootstrap

accordion