隐藏/显示表格单元格的某些部分

Question

我有一个表如下:

一个标头	另一个标头
首先点击(some-text-initial -hidden)	row

您使用了错误的选择器，它应该是.complete，应该使用siblings而不是closest。

$(this).siblings('.complete').show();

https://jsfiddle.net/viethien/dbc349gm/6/

我更新了显示/隐藏div的代码

if(!$(this).siblings('.complete').is(":visible")){
$(this).siblings('.complete').show();
}else{
$(this).siblings('.complete').hide();
}

span.complete是i.fa-chevron-down的兄弟。$.closest只搜索所提供的元素本身和它们的祖先元素。

你可以用$.siblings代替。

$('table').on('click', 'tr.test .fa-chevron-down', function()         {
$(this).closest('tbody').toggleClass('open');
$(this).siblings('.complete').show();
});

.test~ .test2{
display: none;
}
.open .test~ .test2{
display: table-row;
}
.test {
cursor: pointer;
}
.complete{
display:none;
}

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">
<th> header1</th>
<th> header2 </th>
<tbody>
<tr class="test">
<td>data-always-visible
<span class="complete">some-data-to hide and show</span>
<br>
<i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
</tbody>
</table>