Блог

У меня есть следующая таблица:

который при «щелчке» становится

при «щелчке» текст «некоторый изначально скрытый текст» не отображается после «щелчка», я хочу показать и скрыть текст при «щелчке» У меня есть рабочая таблица, как показано здесь: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();
        });
        
 

Заранее спасибо.

Вы используете неправильный селектор, он должен быть .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>