Блог

Я хочу скрыть строки с данными под строкой с заголовком и кнопкой до следующей строки с заголовком и кнопкой. нажатие одной из кнопок / — скрывает / расширяет все строки с содержимым данных. http://jsfiddle.net/9ekhuj1q Пожалуйста, найдите код ниже-

 <table border="0">
  <tr>
    <th>Data1</th>
    <th>Data2</th>
  </tr>
  <tr  class="header expand">
      <td ><button class="url-button">
      <span class="sign"></span>
      </button></td>
      <td>Header </td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr  class="header expand">
      <td ><button class="url-button">
      <span class="sign"></span>
      </button></td>
      <td>Header </td>
  </tr>
  <tr>
    <td>date</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
  </tr>
</table>
  

оформление

 table, tr, td, th
{
    border: 1px solid black;
    border-collapse:collapse;
}
tr.header
{
    cursor:pointer;
}
.header .sign:after{
  content:" ";
  display:inline-block;      
}
.header.expand .sign:after{
  content:"-";
 }
  

Нажмите функцию-

 $('.url-button').click(function(){
     $('.header').toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});
  

В настоящее время вы выбираете все элементы с header классом всякий раз, когда вы нажимаете одну из кнопок с $('.header') . Но вы захотите выбрать элемент с классом заголовка, который является прародителем кнопки, которую вы только что нажали.

Используйте this ключевое слово для ссылки на элемент, который вы прослушиваете с помощью click() прослушивателя событий. Этот элемент будет кнопкой, на которую вы нажали. Оттуда вы хотите выбрать элемент с header классом, который является родительским для кнопки, использующей .parent('.header') . Теперь вы выбрали правильный элемент, а не все элементы с классом.

 $('.url-button').click(function() {
  $(this)
    .parents('.header')
    .toggleClass('expand')
    .nextUntil('tr.header')
    .slideToggle(100);
});
  

Другой подобный способ выполнить эту работу — использовать event.target :

   $('.url-button').click(function(event){ 
    $(event.target)
      .closest('tr')
      .toggleClass('expand')
      .nextUntil('tr.header')
      .slideToggle(100);
  });
  

Есть аргументы и для того, и для другого, но я предпочитаю использовать event.target over this , потому что это делает объект, на который this ссылается, сразу очевидным. В любом случае, ваш исходный код выбирает все элементы с .header классом, который, как указывает Эмиэль, является источником вашей проблемы.

Кроме того, closest и parents имеют одинаковое поведение в этом случае. (Если вам интересно, чем они отличаются, взгляните на это.)