javascript - 如何限制对jQuery变量值的更改？

我有桌子，每个tr元素在白色和灰色背景之间交替。当用户将鼠标悬停在tr元素上时，背景变为绿色。当用户单击tr元素时，将显示在单击的tr元素下方的隐藏的tr元素。那时，用户单击的tr元素及其上显示的隐藏元素的背景设置为蓝色。当用户再次单击tr元素时，下面的tr元素再次被隐藏。此时，背景色应恢复为默认的白色或灰色。而是保留为蓝色。

我知道它为什么会发生，但我不确定如何在jQuery中修复它。这是我的HTML：

 <div class="retail-listing">
<div class="container">
  <table>
      <tr>
        <th>Date</th>
        <th>Sales Price</th>
        <th>Odometer</th>
        <th>Year</th>
        <th>Series</th>
        <th>Body</th>
        <th>Drive Type</th>
      </tr>
      <tr class="retail-list-top">
        <td>09/09/2013</td>
        <td>$25,200</td>
        <td>8,231</td>
        <td>2011</td>
        <td>Pick-up</td>
        <td>Quad Cab</td>
        <td>4WD</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-detail">
        <td>Vin#: 107RV1GP8BS000000</td>
        <td>Make: Dodge Truck</td>
        <td>Model: Ram 1500</td>
        <td>Sale Type: Dealer</td>
        <td>Region: New England</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-top">
        <td>09/09/2013</td>
        <td>$25,200</td>
        <td>8,231</td>
        <td>2011</td>
        <td>Pick-up</td>
        <td>Quad Cab</td>
        <td>4WD</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-detail">
        <td>Vin#: 107RV1GP8BS000000</td>
        <td>Make: Dodge Truck</td>
        <td>Model: Ram 1500</td>
        <td>Sale Type: Dealer</td>
        <td>Region: New England</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-top">
        <td>09/09/2013</td>
        <td>$25,200</td>
        <td>8,231</td>
        <td>2011</td>
        <td>Pick-up</td>
        <td>Quad Cab</td>
        <td>4WD</td>
      </tr>
    </table>
    <table>
      <tr class="retail-list-detail">
        <td>Vin#: 107RV1GP8BS000000</td>
        <td>Make: Dodge Truck</td>
        <td>Model: Ram 1500</td>
        <td>Sale Type: Dealer</td>
        <td>Region: New England</td>
      </tr>
    </table>
</div>

这是我的脚本：

$(function() {

    var bgColor = $('.retail-list-top').css('background-color');

    $('.retail-list-detail').hide();

    $('.retail-list-top').hover(function () {
        $(this).css("background-color", "#c9e9a4");
    },
        function() {
            $(this).css("background-color", bgColor);
        }
    );

    $('.retail-list-top').bind('click', function() {

        $(this).toggleClass('detail-slide');

        if ($(this).hasClass('detail-slide')) {
            $(this).closest('table').next().find('.retail-list-detail').show();
            $(this).css({backgroundColor :"#e1eff4", border : "none"});
            $(this).hover(function () {
                $(this).css("background-color", "#e1eff4");
            },
                function () {
                    $(this).css("background-color", "#e1eff4");
                }
            );
        } else {
            $(this).closest('table').next().find('.retail-list-detail').hide();
            $(this).css({backgroundColor : bgColor, borderBottom : "1px solid #c4c4c4"});
        }
    })
});

最佳答案

我建议通过使用CSS大大简化此过程。我已经这样做了，here。

我还使用了添加和删除蓝色类的方法，以使“打开的”表行具有蓝色背景。这样，单击时它不是嵌入式样式，而只是在类中。

JS

$(function() {

    $('.retail-list-top').click( function() {

        $(this).toggleClass('detail-slide');

        if ($(this).hasClass('detail-slide')) {
            $(this).closest('table').next().find('.retail-list-detail').show();
            $(this).addClass('blue');
        } else {
            $(this).closest('table').next().find('.retail-list-detail').hide();
            $(this).removeClass('blue');
        }
    })
});

的CSS

.retail-list-top:hover{
    background:#c9e9a4;
}

.retail-list-detail{
    display:none;
}

.blue{
    background:#e1eff4;
}