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

Question

我有一张如下表：

A header	Another header
First (some-text-initially-hidden) click	row

在“点击”时变成了

A header	Another header
First (some-text-should-be visible now) click	row

在“单击”时，“单击”后未显示文本“最初隐藏的某些文本”，我想在“单击”时显示和隐藏文本 我有一个工作表，如下所示：jsfiddle

代码： HTML：

<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>
  
</tbody>
</table>

CSS：

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

JS/JQuery:

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

提前谢谢你。

Answer 1

您使用了错误的选择器，它应该是 .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();
 }

Answer 2

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>