Javascript 使用类切换进行滑动切换

我有一个表格，如果我点击标题，我想折叠下一行。另外，我想更改类，不管表是否折叠

我写道：

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

---

脚本

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

小提琴：

CSS

您可以与多个类一起使用：

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

第1行

---

演示：

如果您正在寻找类似于您的

slideToggle（）

，它的名称为

toggleClass（）

。如果您正在使用，您将需要一个默认类，另一个用于修改状态。请参见，他需要在所有

元素上设置此初始状态。因此，这应该是一个-1？这并不意味着冒犯您，如果我冒犯了您，请道歉：）@AhmadAssaf无意冒犯：-）；但我认为这样的答案是有效的，不会被否决：有理由，有代码，有演示，所以…这只会再次切换类“关闭”，切换两个类不会达到他想要的行为

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");
} 

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

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