Question

我是Twitter Bootstrap的JavaScript新手和绝对新手。我在表格中重复了一行，每一行都需要一个下拉式手风琴，以便在新表格中显示更多信息。

我有这个工作，但希望有一个上下V形动画，以清楚地表明主表行的手风琴折叠或扩展。我的麻烦在于我不知道如何分别引用每一行的glyphicons（按名称/ id）：目前，所有的glyphicons都是一致的。

我的代码如下，在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");
});

Answer 1

实现此目的的一种快速方法是向父行添加id。例如，第一个父行看起来像这样：

<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规则来显示一个glyphicon或另一个基于“collapsed”类）。

如何在html表中的bootstrap手风琴中引用和动画重复的glyphicon-vvron

1 个答案: