用jquery切换表图标

Question

I have a snippet of my table structure below.

<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>

I am using jquery to hide/show the extra table row using the below code.

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

I am trying to get the icon to toggle when opening and closing hidden table rows.

As you can see in the fiddle the icon will only toggle when opening and closing the next hidden row only.

See http://jsfiddle.net/magmate11/2e2yy/4/ for an example.

Thanks in advance.

Answer 1

Paste

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

after

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

Result

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