I made a table/accordion thing that has hidden rows that are only visible when you click the "header" row. Unfortunately, the table only displays a ONE row for each header you click.
我做了一个表/手风琴导航,它有隐藏的行,只有在单击“header”行时才可见。不幸的是,该表仅为单击的每个标题显示一行。
jsfiddle
As you can see in the code, each header row (ex: "9 / Parts Inspection") has two sub rows that are hidden (ex: "9.1" and "9.2"). When you click, only the first one (9.1) appears, leaving the others (9.2 and any others I add) hidden when they are supposed to be shown.
正如您在代码中看到的,每个头行(ex:“9 / Parts Inspection”)有两个隐藏的子行(ex:“9.1”和“9.2”)。当您单击时,只有第一个(9.1)出现,其余的(9.2和其他我添加的)在应该显示的时候隐藏。
I'm assuming it's a problem with the class/id names getting confused, but no matter what different names I give things, it still doesn't work.
我假设这是一个类/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>
1 个解决方案
#1
1
Give your tr's the same class instead of an unique id. Use this class as your data-target. For example:
给你的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>
I hope this helps.
我希望这可以帮助。
#1
1
Give your tr's the same class instead of an unique id. Use this class as your data-target. For example:
给你的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>
I hope this helps.
我希望这可以帮助。