在IE8下的table tr使用toggle()无法生效的bug的解决方法

比如一个用 <table> 排版的问题解答，内容如下：

<table>
<tr><td class="Q">Q1: 问题1</td></tr>
<tr><td class="A">A1: 解答1</td></tr>
<tr><td class="Q">Q2: 问题2</td></tr>
<tr><td class="A">A2: 解答2</td></tr>
<tr><td class="Q">Q3: 问题3</td></tr>
<tr><td class="A">A3: 解答3</td></tr>
</table>

jQuery 代码：$('td.Q').click(function() { 

    $(this).parent().next().toggle();

});

以上代码在 IE8 下执行会造成隐藏后就不能再显示出来，若是在 IE8 的“兼容模式”就可以正常运作，因此以上代码是没有错的。

以 Developer Tools 來看 <tr> 的 display 属性，都是 none 隐藏状态的，执行 toggle() 后也仍然是 none，不会改变：

以兼容模式执行后，点击 "问题1" 的 <tr> 可看到 "解答1" 的 display 属性已经改为 block 了，可正常工作 （实际上在IE其他版本及Firefox等浏览器中均能正常工作，只在IE8下有问题）：

  DirectAdmin面板零度科技

后来查到此问题为 jQuery 1.3.2 的 bug，也找到相应的解决方法，所以修改后的代码如下： 

$('td.Q').click(function() { 
    var tr = $(this).parent().next();

    tr.toggle(tr.css('display') == 'none');

});

这个 bug 在 jQuery 1.3.0 及 1.3.1 是不存在的，只有在 1.3.2，而且只有用 IE8(非兼容模式) 会出现此问题。 原文来自零度科技

转载自零度科技：http://www.00isp.com/webdesign/jquery/770.html