欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

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

美国西岸机房 添加于 2011-01-11  
jquery教程

比如一个用 <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下有问题):

 

后来查到此问题为 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.ldisp.com/a/jquery/2011/770.shtml

上一篇:jquery ajax中文乱码的解决办法
下一篇:IE8下, jQuery :hidden函数在TR上的bug与解决方法

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

222

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理