slideToggle with classToggle

Question

У меня есть таблица, и я бы хотел свернуть следующую строку, если я нажму на заголовок. Кроме того, я хотел бы изменить класс, была ли таблица свернута или нет.

Я написал:

$('th').click(function(){ 
     var $el = $(this) 
     $(this).closest('tr').next().slideToggle(0) 
     if($(this).closest('tr').next().is(':visible')) { 
      $el.addClass ('opened'); 
      $el.removeClass('closed'); 
     } else { 
      $el.removeClass ('opened'); 
      $el.addClass  ('closed'); 
     } 
}); 

мне интересно, если я могу сделать лучше с JQuery?

Вот HTML код:

<table> 
    <tr> 
     <th colspan="2">Line 1</th> 
    </tr> 
    <tr> 
     <td>data</td> 
     <td>data</td> 
    </tr> 
    <tr> 
     <th colspan="2">Line 2</th> 
    </tr> 
    <tr> 
     <td>date</td> 
     <td>data</td> 
    </tr> 
</table> 

И CSS:

.opened { 
    background-image: url("bullet_toggle_minus.png"); 
    background-repeat: no-repeat; 
    background-position: left center; 
} 

.closed { 
    background-image: url("bullet_toggle_plus.png"); 
    background-repeat: no-repeat; 
    background-position: left center; 
} 

Answer 1

Вы можете использовать toggleClass с несколькими классами:

$('th').click(function() { 
    var $el = $(this) 
    $el.closest('tr').next().slideToggle(0); 
    $el.toggleClass('opened closed'); 
}); 

Не забудьте установить начальное состояние всех элементов, установив класс на th нравится:

<th colspan="2" class="opened">Line 1</th> 

Демо: http://jsfiddle.net/r0xpbqea/

Answer 2

Script

$('th').click(function() { 
     var $el = $(this); 
     $(this).closest('tr') 
       .next() 
       .slideToggle(0) 
       .toggleClass('closed'); 
}); 

Стиль

tr { 
    background-image: url("bullet_toggle_minus.png"); 
    background-repeat: no-repeat; 
    background-position: left center; 
} 

tr.closed { 
    background-image: url("bullet_toggle_plus.png"); 
    background-repeat: no-repeat; 
    background-position: left center; 
} 

Fiddle: http://jsfiddle.net/teh94dma/

Answer 3

$('tr').addClass('opened'); 
$('th').click(function(){ 
     var $el = $(this) 
     $(this).closest('tr').next().slideToggle(0).toggleClass('opened closed'); 
}); 

CSS

tr { 
    background-repeat: no-repeat; 
    background-position: left center; 
} 

.opened { 
    background-image: url("bullet_toggle_minus.png"); 
} 

.closed { 
    background-image: url("bullet_toggle_plus.png"); 
}