Jun
7
[转]jQuery 的toggle()方法在IE 8 的<tr>失效的问题
某Web应用,为了方便浏览,使用表格进行汇总时,初始化状态仅显示概要,若点击该行才用显示下面的详细内容。用jQuery 来实现本来是很简单的事情,在IE 7 测试时很顺利。但Win 7下发现,IE 8中动作失效了。经查找原因,原来是jQuery 1.3.2的Bug。该问题早在网上有不少介绍:这里,转载如下:
一、问题描述
HTML代码:
jQuery 代码:
在IE 8 的“兼容性视图模式”或IE 7、FireFox等浏览器环境中,都是正常的状态。这可用IE 8 的“开发人员工具”(在浏览器中按 F12 调用),或FireFox的FireBug来分析:
可见,点击后,该行CSS的display 属性值会变为“block”。
但在 IE 8 下该行CSS的display属性值不会改变:
二、解决问题
该问题只在jQuery 1.3.2上存在,jQuery 1.3.0、jQuery 1.3.1都没有该Bug。可用下面的代码解决:
三、参考资料
[jQuery 1.3.2] 在 IE8 的 <table> <tr> 使用 toggle() 無法生效的解決方法
jQuery 1.3.2 causes problems at IE 8
$().toggle() does not work with <tr> in IE 8
jQuery API toggle()
一、问题描述
HTML代码:
<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>
<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();
});
$(this).parent().next().toggle();
});
在IE 8 的“兼容性视图模式”或IE 7、FireFox等浏览器环境中,都是正常的状态。这可用IE 8 的“开发人员工具”(在浏览器中按 F12 调用),或FireFox的FireBug来分析:
可见,点击后,该行CSS的display 属性值会变为“block”。
但在 IE 8 下该行CSS的display属性值不会改变:
二、解决问题
该问题只在jQuery 1.3.2上存在,jQuery 1.3.0、jQuery 1.3.1都没有该Bug。可用下面的代码解决:
$('td.Q').click(function() {
var tr = $(this).parent().next();
tr.toggle(tr.css('display') == 'none');
});
var tr = $(this).parent().next();
tr.toggle(tr.css('display') == 'none');
});
三、参考资料
[jQuery 1.3.2] 在 IE8 的 <table> <tr> 使用 toggle() 無法生效的解決方法
jQuery 1.3.2 causes problems at IE 8
$().toggle() does not work with <tr> in IE 8
jQuery API toggle()
博爱老头
2010/06/09 13:35
很久没有关注这方面的东西了。
分页: 1/1 1