Twitter bootstrap 如何在html表格中的引导手风琴中引用和动画重复的字形图标雪佛龙

我是一个JavaScript新手，也是Twitter引导的绝对新手。我在一个表中有重复的行，每个行都需要一个下拉式手风琴来显示新表中的更多信息

我有这个工作，但想有动画向上和向下的V形，以清楚地表明当一个主表行的手风琴折叠或扩大。我的问题是，我不知道如何按名称/id分别引用每一行的GlyphIcon：目前，所有GlyphIcon都会同步更改

下面给出了我的代码，在JSFIDLE中如下所示：。如果有人能发现任何其他明显的不一致或糟糕的编码实践，也请告诉我-

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

---

实现这一点的快速方法是向父行添加id。例如，第一个父行如下所示：

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

您可以在此处查看最终结果：

---

假设你只有2行，你可以这样做，否则我会开始寻找一种更通用的方法来实现这一点，例如使用类和CSS规则来显示一个或另一个基于折叠类的glyphicon。

谢谢@Santiag00，无论如何，这将让我开始。这些表是动态创建的，因此将有一个或多个表，因此我可能需要按照您建议的“类和CSS规则”路径进行操作。如能就此提供任何指导，将不胜感激。

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