Question

我在下面有一个表格结构的片段。

<tr>
    <td class="center "><a href="#" class="icon-plus-sign"></a></td>
    <td>IMG</td>
    <td>This is the listings title</td>
    <td>This is the listings description</td>
    <td>Status</td>
    <td>Actions</td>
</tr>                   
<tr class="extra">
    <td colspan="6">
        <table cellpadding="5" cellspacing="0" border="0" class="inner-table">
            <tbody>
               <tr>
                  <td><b>Current Price</b></td>
                  <td>$ 34.67</td>
               </tr>
               <tr>
                  <td><b>Listing Ends</b></td>
                  <td>06.11.2013 12:20:47</td>
               </tr>
               <tr>
                  <td><b>Extra info</b></td>
                  <td>And any further details here</td>
               </tr>
            </tbody>
        </table>
    </td>
</tr>

我正在使用jquery使用以下代码隐藏/显示额外的表格行。

jQuery(function ($) {   
    $("#items .center").on('click', function (e) {
    e.preventDefault();
    if ($(this).parent().next('tr').css('display') == 'none') {
        $("#items tr.extra").hide();
        $(this).addClass('open').parent().next('tr').show().addClass('highlight');
        } else {
            $('#items tr.extra').hide();
            $(this).removeClass('open');
            }
        $('#items tr.extra td').css('border-collapse', 'collapse');
     });
});

在打开和关闭隐藏的表格行时，我试图让图标切换。

正如您在小提琴中看到的那样，只有在打开和关闭下一个隐藏行时才会切换图标。

有关示例，请参阅http://jsfiddle.net/magmate11/2e2yy/4/。

提前致谢。

Answer 1

粘贴

$("#items td.center").removeClass('open');

后

if ($(this).parent().next('tr').css('display') == 'none') {
    $("#items tr.extra").hide();

结果

if ($(this).parent().next('tr').css('display') == 'none') {
    $("#items tr.extra").hide();
    $("#items td.center").removeClass('open'); // NEEDED LINE
    $(this).addClass('open').parent().next('tr').show().addClass('highlight');
} else {
    $('#items tr.extra').hide();
    $(this).removeClass('open');
}

用jquery切换表图标

1 个答案: