javascript - 与classToggle一起的slideToggle

我有一张桌子，如果我点击标题，我想折叠下一行。另外，我想更改表是否折叠的类。

我这样写：

$('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;
}

最佳答案

您可以将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/

关于javascript - 与classToggle一起的slideToggle，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25683046/