html 幻灯片使用类切换切换

wgxvkvu9 于 2022-12-02 发布在其他

关注(0)|答案(3)|浏览(191)

我有一个表格，如果单击标题，我希望折叠下一行。另外，我希望更改类，而不管表格是否折叠。
我这样写道：

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

Html

来源：https://stackoverflow.com/questions/25683046/slidetoggle-with-classtoggle

3条答案

按热度按时间

yyyllmsg1#

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

赞(0）回复(0）举报 2022-12-02

yyhrrdl82#

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

赞(0）回复(0）举报 2022-12-02

vktxenjb3#

脚本

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

小提琴：http://jsfiddle.net/teh94dma/

赞(0）回复(0）举报 2022-12-02

我来回答

html 幻灯片使用类切换切换

3条答案

相关问题

热门标签

最新问答