Question

好的，我确信这很容易，但是我不能立刻了解代码。

我有一个简单的table，thead如下

<thead>
    <tr class="header">
        <th colspan="7">HEADER <span>-</span></th>
    </tr>
</thead>

当我点击th中的thead时，我正在切换tbody，如下所示：

$('.header').click(function(){
    $(this).closest('table').children('tbody').toggle();
});

如何在标题中包含一个在tbody切换时更改的图标。即默认情况下加载table时，tbody已经显示并且当前显示减号。单击时如何将其更改为加号？

Answer 1

您可以摆脱span内的th并使用::after pseudo-selector。

从头开始将"open"课程附加到th。

HTML：

<thead>
    <tr class="header">
        <th colspan="7" class="open">HEADER</th>
    </tr>
</thead>

在th.open和th.closed之后添加用于显示加号和减号的CSS：

th.open::after {
    font-family: Arial;
    content:'-';
    padding-left: 3px;
}

th.closed::after {
    font-family: Arial;
    content:'+';
    padding-left: 3px;    
}

在JavaScript "open"类"closed"中，th $('.header').click(function(){ $(this).closest('table').children('tbody').toggle(); $(this).children("th").toggleClass('open closed'); });（toggleClass()接收空格分隔的类名，以便切换）：

{{1}}

以下是Demo

jQuery - 单击时更改thead tr上的图标

1 个答案: