Как ссылаться и анимировать повторяющийся глификон-шеврон в аккордеоне начальной загрузки в таблице html

Я новичок в JavaScript и абсолютный новичок в Twitter Bootstrap. У меня есть повторяющиеся строки в таблице, каждая из которых требует раскрывающегося аккордеона для отображения дополнительной информации в новой таблице.

У меня это работает, но я хочу иметь анимированные шевроны вверх и вниз, чтобы четко указывать, когда аккордеон строки основной таблицы свернут или развернут. Моя проблема в том, что я не знаю, как ссылаться на глификоны каждой строки отдельно (по имени/идентификатору): на данный момент все глификоны меняются в унисон.

Мой код приведен ниже, а в JSFiddle здесь: http://jsfiddle.net/leComte/7T2p3/2 /. Если кто-то может заметить какие-либо другие вопиющие несоответствия или плохую практику кодирования, пожалуйста, сообщите мне и об этом! :-)

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

accordion twitter-bootstrap
person leComte    schedule 08.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Быстрым способом добиться этого было бы добавление идентификатора к родительским строкам. Например, первая родительская строка будет выглядеть так:

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

И вот как будет выглядеть JS для этой первой строки:

$('#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");
});

Вы можете посмотреть окончательный результат здесь: http://jsfiddle.net/7pwg1j5f/

Предполагая, что у вас будет только 2 строки, вы можете сделать это, иначе я бы начал искать более общий способ осуществить это (например, используя классы и правила CSS для отображения одного глификона или другого на основе «свернутого» класса).

person Santiag00    schedule 08.08.2014
comment
Спасибо @Santiag00, в любом случае это поможет мне начать. Эти таблицы создаются динамически, поэтому их будет одна или несколько, и поэтому мне, вероятно, придется пойти по предложенному вами пути «классы и правила CSS». Любое руководство по этому поводу будет оценено по достоинству. - person leComte; 11.08.2014