Как да препращаме и анимираме повтарящ се glyphicon-chevron в акордеон за стартиране в 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
Благодаря @Santia00, така или иначе това ще ме накара да започна. Тези таблици се създават динамично, така че ще има една или повече и следователно вероятно ще трябва да мина по пътя на предложените от вас „класове и CSS правила“. Всякакви насоки по този въпрос ще бъдат оценени. - person leComte; 11.08.2014