JQuery展开并隐藏表td

Question

我设法将表格行展开并隐藏，但是当我添加另一行时，它就像所有行一起折叠。

你的帮助非常感谢。

JS

$('#more').on('click',function(event){
  $(this).closest('tr').nextAll('.hidden-row').toggle();
});

以下是DEMO

Answer 1

您正在使用 nexAll() 选择旁边的所有.hidden-row兄弟姐妹，要立即使用下一个兄弟 next() 代替。此外，您对td使用相同的id，它应该是唯一的，因此只能选择第一个元素。对于元素组，始终使用class。

$('.more').on('click', function(event) {
  $(this).closest('tr').next().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td><a class="more" href="#">section</a>
    </td>
  </tr>
  <tr class="hidden-row">
    <td colspan="10">Hahaha</td>
  </tr>
  <tr>
    <td><a class="more" href="#">more</a>
    </td>
  </tr>
  <tr class="hidden-row">
    <td colspan="10">Hahaha</td>
  </tr>
</table>

Answer 2

请勿使用nextAll()，只需使用next()。

HTML文档中也不应该有重复的ID，所以用类替换所有more id。

请参阅JSFiddle，了解更新的代码应该是什么样的。

JSFiddle