Question

我有桌子，每个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"});
        }
    })
});

Answer 1

我建议通过使用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;
}

Answer 2

看看这个。那是你在找什么？

http://jsfiddle.net/55chh/1/

<强> JS

$(function() {

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

$('.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({background:"#e1eff4", border : "none"});
        $(this).removeClass("retail-list-hover");
    } else {
        $(this).closest('table').next().find('.retail-list-detail').hide();
        $(this).css({backgroundColor : bgColor, borderBottom : "1px solid #c4c4c4"});
        $(this).addClass("retail-list-hover");
    }
})
});

<强> CSS

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

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

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

2 个答案: