单击时手风琴表仅显示一行（引导程序）

Question

我做了一个表格/手风琴的东西，它有隐藏的行，只有当你点击“标题”行时才可见。不幸的是，表格只为您单击的每个标题显示一行。

jsfiddle

正如您在代码中所见，每个标题行（例如：“9 / Parts Inspection”）都有两个隐藏的子行（例如：“9.1”和“9.2”）。当您单击时，只有第一个 (9.1) 出现，而​​其他（9.2 和我添加的任何其他）在应该显示时隐藏。

我假设这是类/id 名称混淆的问题，但无论我给什么不同的名称，它仍然不起作用。

<table id="tbl-sample-values" class="table table-condensed table-bordered table-hover" style="font-size:85%;">
    <thead>
        <tr class="tabletop">
            <th>Step #</th>
            <th>Processing Step</th>
            <th>Barcode</th>
        </tr>
    </thead>

    <tbody>

        <tr data-toggle="collapse" data-target="#accordion" class="clickable row-header">
            <td>9</td>
            <td colspan="2">Parts Inspection</td>
        </tr>

        <tr id="accordion" class="collapse">
            <td>9.1</td>
            <td>Handle silicon electrodes...</td>
            <td>[Barcode here]</td>
        </tr>

        <tr id="accordion" class="collapse">
            <td>9.2</td>
            <td>Verify part number...</td>
            <td>[Barcode here]</td>
        </tr>

        <tr data-toggle="collapse" data-target="#accordion2" class="clickable row-header">
            <td>10</td>
            <td colspan="2">IPA Clean</td>
        </tr>

        <tr id="accordion2" class="collapse">
            <td>10.1</td>
            <td>Place part with frontside facing up...</td>
            <td>[Barcode here]</td>
        </tr>

        <tr id="accordion2" class="collapse">
            <td>10.2</td>
            <td>Wipe the part using cleanroom wiper...</td>
            <td>[Barcode here]</td>
        </tr>

    </tbody>
</table>

Answer 1

为您的 tr 提供相同的类而不是唯一的 id。使用此类作为您的数据目标。例如：

<tr data-toggle="collapse" data-target=".my-row" class="clickable row-header">
    <td>9</td>
    <td colspan="2">Parts Inspection</td>
</tr>

<tr id="accordion" class="my-row collapse">
    <td>9.1</td>
    <td>Handle silicon electrodes...</td>
    <td>[Barcode here]</td>
</tr>

<tr id="accordion" class="my-row collapse">
    <td>9.2</td>
    <td>Verify part number...</td>
    <td>[Barcode here]</td>
</tr>

我希望这会有所帮助。