JavaScript

Question

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

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

~~这就是我到目前为止想弄明白的全部内容。~~
工作 js 代码：

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

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

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

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

Answer 1

我们实际上可以大大简化 table 行的标记：

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

...并使用以下逻辑：

.nextUntil('.warning') 到 select 每个 .warning 元素之后的尾随 <tr>。请参阅 .nextUntil().
使用.slideToggle()到show/hide元素，而不需要使用过于冗长的CSS检测

这里是上面的逻辑，写在jQuery:

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

如果您只想定位具有 class hidden 的下游 <tr>（在可能存在其他不相关的 <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();
});

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

这是一个概念验证示例：

$(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>

Answer 2

$(".warning").on("click", function() { 使用 jQuery .on 将事件添加到动态元素（未来生成的元素）。

然后找到下一个隐藏项并切换即可。

查看示例：

$(".warning").on("click", function() {
  var nextHidden = $(this).next('.hidden');
  nextHidden.find('div').slideToggle();
});

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

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

td {
  width: 50px;
}

.hidden 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="active hidden">
      <td>
        <div class="">Hidden.</div>
      </td>
      <td>
        <div class="">Hidden.</div>
      </td>
      <td>
        <div class="">Hidden.</div>
      </td>
    </tr>

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

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

Answer 3

请看下面的代码片段，注意我已经设置了所有隐藏的 class , class='hidden' ，给它们取不同的名字是没用的 :

$(".warning").on("click",function(){
  $(this).nextUntil(".warning").find(".hidden").slideToggle();
})

table {
  width: 75%;
  border-collapse: collapse;
}
tr, td {
  border: 2px solid #AEAEAE;
  padding: 0;
}

td {
  width: 50px;
}

.hidden, .hidden1, .hidden2 {
  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="active">
          <td>
              <div class="hidden">Hidden.</div>
          </td>
          <td>
              <div class="hidden">Hidden.</div>
          </td>
          <td>
              <div class="hidden">Hidden.</div>
          </td>
        </tr>
        <tr class="active">
          <td>
              <div class="hidden">Hidden.</div>
          </td>
          <td>
              <div class="hidden">Hidden.</div>
          </td>
          <td>
              <div class="hidden">Hidden.</div>
          </td>
        </tr>
        <tr class="warning">
          <td>Click to show</td> <td>Name</td> <td>Age</td>
        </tr>
        <tr class="active">
          <td>
              <div class="hidden">Hidden.</div>
          </td>
          <td>
              <div class="hidden">Hidden.</div>
          </td>
          <td>
              <div class="hidden">Hidden.</div>
          </td>
        </tr>

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

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

JavaScript - On click on undefined number of elements to toggle multiple elements

html

css

jquery

frontend