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

Question

我有一个表需要有一个未定义的行数，这些行应该在点击时显示一定数量的元素（在这种情况下为div，因为我读到它是在tr上使用切换的最佳方式） 。我能做的最好就是为已经设定数量的元素做好准备......

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

这就是我到目前为止试图解决的问题。
使用js代码：

<ul class="myUL">
  <li class="edit-list">
    <span class="expand-icon">
      
    </span>
    <span class="edit-list-span" contenteditable="true">
      Test Span
    </span>
  </li>
</ul>

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

编辑：对不起，我忽略了提到我想添加一个滑动动画。并且slideToggle似乎无法工作......

EDIT2：Terry的最佳答案 改变了工作代码。

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();
});

当然这意味着在隐藏元素时会出现奇怪的堆叠边框，因为技术上隐藏了表行内容，但没有折叠表行/单元本身。

这是一个概念验证示例：

＆＃13;
＆＃13;
$(function() {
  $('.warning').on('click', function() {
    var $ele = $(this).nextUntil('.warning').filter(function() {
      return $(this).hasClass('hidden');
    }).find('td > div');
    $ele.slideToggle();
  });
});
＆＃13;
table {
  width: 75%;
  border-collapse: collapse;
}

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

td {
  width: 50px;
}

.hidden td div {
  display: none;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

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 ='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>