单击时切换表行

Question

我有一个 HTML 表格，如果您单击第一个显示“打开”的单元格，对于每一行，它将显示一个子行（如果有的话）。这工作正常，但唯一的问题是，当我单击第一个单元格来切换子行时，表中的所有子行都会同时切换。我希望它只显示我单击的行的子行，而不是每个子行。这是一个小提琴：

http://jsfiddle.net/kr967kd6/

正如您在我的小提琴中看到的，我将复选框放在表格之前。我之前试过把我的复选框放在这里：

<input id="child1" type="checkbox">
<tr class="toggle">
    <td></td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
</tr>

但这行不通。我能够让这些行完全切换的唯一方法是将复选框放在 <table> 元素之前，然后在我的 CSS 中像这样调用它：

input[type=checkbox]:checked ~ table tr.toggle { display: table-row; width: calc(100% - 20px); } 

如何在不同时切换所有子行的情况下让子行切换到我单击的相应行？

任何帮助将不胜感激。

Answer 1

使用 JavaScript

这就是当 ANY 复选框变为 :checked 时，您的目标是所有 TR 元素

input[type=checkbox]:checked ~ table tr.toggle { /* All TR? nope. wrong. */

一个接一个地使用您的输入，您也可能会陷入选中/未选中的棘手组合。您应该将您的复选框彼此远离 -> 在需要使用 Next Sibling 进行定位的所需元素之上，这些元素需要被切换（无法使用 TABLE）。

改用多个表，或者使用 JS or jQuery ^{jsBin demo}

$(".test-table td a").click(function(){
  $(this).closest("tr").next().toggle();
});

---

使用纯 HTML、CSS 的替代方法

使用纯 HTML / CSS 可以做到的最佳是使用:target 选择器
（这不允许您切换或保持活动状态，但无论如何它非常有用）

.toggle        { display: none; }
.toggle:target { display: table-row; }

    <tr>
        <td><a href="#tr1">Open</a></td>
        <td>0</td>
    </tr>
    <tr id="tr1" class="toggle">
        <td></td>
        <td>data</td>
    </tr>

jsBin demo (using :target selector)

Answer 2

这是JSFiddle，希望对您有所帮助。

如果您不介意 jQuery 解决方案：

$("#data tr td").on("click", function() {
    $(this).parent().next("tr").toggleClass("active");
});

在你的 CSS 中，改变这个：

input[type=checkbox]:checked table ~ tr.toggle { 
    display: table-row; 
    width: calc(100% - 20px); 
}

到这里：

.toggle.active {
    display: table-row; 
    /* width: calc(100% - 20px);   => As Roko C. Buljan pointed out, width has no effect on <tr> */
}