JQuery表行单击展开/折叠

Question

我尝试了多种解决方案，但没有一种对我有效。我有一个表，其中一些行可以被视为节标题或键，而另一些行则包含该标题或键下的项。

<table>
<thead>
<tr><th colspan="2">Name</th><th colspan="2">Date</th></tr>
</thead>
<tbody>
<tr class="key"><td colspan="4">AAA</td></tr>
<tr class="item"><td colspan="2">ANAME</td><td colspan="2">20200101</td></tr>
<tr class="item"><td colspan="2">ANAME</td><td colspan="2">20200101</td></tr>
<tr class="item"><td colspan="2">ANAME</td><td colspan="2">20200101</td></tr>
<tr class="key"><td colspan="4">BBB</td></tr>
<tr class="item"><td colspan="2">BNAME</td><td colspan="2">20200101</td></tr>
<tr class="item"><td colspan="2">BNAME</td><td colspan="2">20200101</td></tr>
<tr class="key"><td colspan="4">CCC</td></tr>
<tr class="item"><td colspan="2">CNAME</td><td colspan="2">20200101</td></tr>
</tbody>
</table>

加载页面时，应使用CSS -> display:none隐藏类为item的行。理想情况下，我应该能够单击标题或key行，其下的所有item都应该展开并可见。此外，我希望所有其他不在单击的key下的item在展开时都被折叠。

我以前的解决方案使用slideToggle和toggleClass，但使用其中一个或两者的组合，我无法获得所需的结果。

我的当前版本将只展开表中的下一个item。目前没有什么可以告诉其他人关闭的，因为我无法让我的任何解决方案表现出与预期相似的行为。

$(".key").click(function(event) {
$key = $(this);
$content = $key.next();
$content.slideToggle(0, function () {
$key.text(function () {
return;
});
});
});

Answer 1

使用nextUntil((获取后面所有行的基本想法。

$("table tbody").on("click", "tr.key", function () {
var active = $(this)
var trs = active.nextUntil(".key")
trs.show();
$("tr.item").not(trs).hide()
})

.key {
background-color: #CCC;
}
.item {
display: none;
}
.item td {
border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th colspan="2">Name</th>
<th colspan="2">Date</th>
</tr>
</thead>
<tbody>
<tr class="key">
<td colspan="4">AAA</td>
</tr>
<tr class="item">
<td colspan="2">ANAME</td>
<td colspan="2">20200101</td>
</tr>
<tr class="item">
<td colspan="2">ANAME</td>
<td colspan="2">20200101</td>
</tr>
<tr class="item">
<td colspan="2">ANAME</td>
<td colspan="2">20200101</td>
</tr>
<tr class="key">
<td colspan="4">BBB</td>
</tr>
<tr class="item">
<td colspan="2">BNAME</td>
<td colspan="2">20200101</td>
</tr>
<tr class="item">
<td colspan="2">BNAME</td>
<td colspan="2">20200101</td>
</tr>
<tr class="key">
<td colspan="4">CCC</td>
</tr>
<tr class="item">
<td colspan="2">CNAME</td>
<td colspan="2">20200101</td>
</tr>
</tbody>
</table>