Jun 7

[转]jQuery 的toggle()方法在IE 8 的<tr>失效的问题 晴

linuxing , 16:31 , 编程 » JavaScript , 评论(1) , 引用(0) , 阅读(34183) , Via 本站原创 | |
    某Web应用,为了方便浏览,使用表格进行汇总时,初始化状态仅显示概要,若点击该行才用显示下面的详细内容。用jQuery 来实现本来是很简单的事情,在IE 7 测试时很顺利。但Win 7下发现,IE 8中动作失效了。经查找原因,原来是jQuery 1.3.2的Bug。该问题早在网上有不少介绍:这里,转载如下:

一、问题描述
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>

jQuery 代码:

$('td.Q').click(function() {
    $(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');
});

三、参考资料
[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()
Tags: , , ,
博爱老头 Homepage
2010/06/09 13:35
很久没有关注这方面的东西了。
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]