jQuery fadeToggle 使行背景颜色消失

Question

这是 Firefox 唯一的问题。这在 Chrome 和 Internet Explorer 上运行良好。

如果您在表格行上有background-color，则使用fadeToggle 隐藏该行，然后再次显示，填充的背景颜色将恢复为默认值。

我把它困在这个JSFiddle 上，它只有一个链接在单行中执行fadeToggle。

切换前

切换后

HTML

<a href="#" id="toggle">Toggle</a>
<table class="">
    <tr class="cat1">
        <td>data1</td><td>data2</td>
    </tr>
</table>

CSS

body {background-color: #ccc}
table {border-collapse: collapse; background-color: #fff}
td {border: 1px solid black; padding: 10px;}
tr.cat1 {background-color: #ddd;}

jQuery

$(document).ready(function() {
    $('#toggle').click(function () { 
        $('tr.cat1').fadeToggle('fast');
    });
});

我发现的东西：

• 如果您切换选项卡然后切换回来，则背景颜色会自行修复
• 如果您删除 border-collapse: collapse，问题就会消失
• jQuery hide 然后 show 工作正常

那么是否可以让fadeToggle 在 Firefox 中正常工作？

Answer 1

这个 1 对你有用：- WORKING DEMO

$('#toggle').click(function () {
      $('tr.cat1 td').fadeToggle();
});