JavaScript - 单击未定义数量的元素以切换多个元素

Question

我有一个表，需要有未定义的行数，单击时应显示一定数量的元素(在本例中为 div，因为我读到这是在 tr 上使用切换的最佳方式)。我能做的最好的就是为已经设定数量的元素制作它......

jsfiddle.net - 这是设置数量的元素。工作代码..

这就是我迄今为止试图弄明白的全部内容。
工作 js 代码:

$('.warning').on('click', function(e) {
  var $ele = $(this).nextUntil('.warning').find('td > div');
    $ele.slideToggle();
  });
});

在这种情况下，我需要每个单击的表格行显示三个相应的 div。
显然，用 jQuery 回答，但我也希望在 vanilla js 中有一个解决方案。

编辑:对不起，我忘了提到我想添加一个滑动动画。而且 slideToggle 似乎不起作用......

EDIT2:特里标记的最佳答案。
将 fiddle 更改为工作代码。

Answer 1

我们实际上可以大大简化表格行的标记:

<tr class="hidden">
  <td>
    <div>Hidden.</div>
  </td>
  <td>
    <div>Hidden.</div>
  </td>
  <td>
    <div>Hidden.</div>
  </td>
</tr>

...并使用以下逻辑:

1. .nextUntil('.warning')选择尾随 <tr>在每个 .warning 之后元素。请参阅 .nextUntil() 的文档.
2. 使用 .slideToggle() 显示/隐藏元素，无需使用过于冗长的 CSS 检测

这是上面的逻辑，用 jQuery 编写:

$('.warning').on('click', function() {
    // Selects all siblings until the next `.warning` <tr>
    var $ele = $(this).nextUntil('.warning').find('td > div');
    $ele.slideToggle();
});

如果您只想定位到下游 <tr>类 hidden (在您不想切换的方式中可能存在其他不相关的 <tr> 的情况下很有用)，您可能想要添加一个可选的过滤器:

$('.warning').on('click', function() {
  // Selects all siblings until:
  // 1. the next `.warning` <tr>, and
  // 2. has the class "hidden"
  var $ele = $(this).nextUntil('.warning').filter(function() {
    return $(this).hasClass('hidden');
  }).find('td > div');
  $ele.slideToggle();
});

当然，这意味着在隐藏元素时会出现奇怪的堆叠边框，因为从技术上讲，您是在隐藏表格行内容，而不是折叠表格行/单元格本身。

这是一个概念验证示例:

$(function() {
  $('.warning').on('click', function() {
    var $ele = $(this).nextUntil('.warning').filter(function() {
      return $(this).hasClass('hidden');
    }).find('td > div');
    $ele.slideToggle();
  });
});

table {
  width: 75%;
  border-collapse: collapse;
}

tr,
td {
  border: 2px solid #AEAEAE;
  padding: 0;
}

td {
  width: 50px;
}

.hidden td div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr class="warning">
      <td>Click to show</td>
      <td>Name</td>
      <td>Age</td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>

    <tr class="warning">
      <td>Click to show</td>
      <td>Name</td>
      <td>Age</td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>

    <tr class="warning">
      <td>Click to show</td>
      <td>Name</td>
      <td>Age</td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
    <tr class="hidden">
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
      <td>
        <div>Hidden.</div>
      </td>
    </tr>
  </tbody>
</table>