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>

Когда страница загружена, строки с классом item должны быть скрыты используя CSS -> display:none. В идеале я должен иметь возможность щелкнуть заголовок или строку key, и все item под ним должны развернуться и стать видимыми. Кроме того, я хочу, чтобы все остальные item, находящиеся не в нажатой key, были свернуты, если они были развернуты.

В моих предыдущих решениях использовались slideToggle и toggleClass, но с одним или комбинацией двух Я не смог получить желаемый результат.

Моя текущая версия будет расширять только следующую item в таблице. В настоящее время нет ничего, что можно было бы сказать другим, чтобы они закрылись, потому что я не мог заставить ни одно из своих решений вести себя так, как хотелось бы.

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

Answer 1

Basi c идея использования 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>