javascript - SlideToggle 和 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/