这几天我收到 Art 人员做好的一个 Q&A 静态页面,因有多项问答,所以我打算将解说的部分先隐藏,让 User 自行展开要看的解说内容,于是就用 jQuery 1.3.2 来处理...
这几天我收到 Art 人员做好的一个 Q&A 静态页面,因有多项问答,所以我打算将解说的部分先隐藏,让 User 自行展开要看的解说内容,于是就用 jQuery 1.3.2 来处理。
Q&A 内容是以
Q1: 问题1 |
A1: 解说1 |
Q2: 问题2 |
A2: 解说2 |
Q3: 问题3 |
A3: 解说3 |
jQuery 程序:
$('td.Q').click(function() {
$(this).parent().next().toggle();
});
以上程序在 IE8 下执行会造成隐藏后就不能再显示出来,若是在 IE8 的“相容模式”就可以正常运行,因此程序是没有错的。
以 Developer Tools 来看 的 display 属性,都是 none 隐藏状态,执行 toggle() 后也仍然是 none,不会改变:
以相容模式执行后,点选 "问题1" 的 可看到 "解说1" 的 display 属性已经改为 block 了,可正常运行:
后来查到此问题为 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(非相容模式) 会出现此问题。
参考连结:
- jQuery 1.3.2 causes problems at IE 8
- $().toggle() does not work with in IE 8
原文:大专栏 [jQuery 1.3.2] 在 IE8 的 <table> <tr> 使用 toggle() 无法生效的解决方法