jQuery .toggle()在IE中不与TR一起使用

Question

我正在使用jQuery的toggle()来显示/隐藏表行.它在FireFox中工作正常,但在IE 8中不起作用.

.show()/ .hide()工作正常.

slideToggle()在IE中也不起作用 - 它会瞬间显示然后再次消失.在FireFox中正常工作.

我的HTML看起来与此类似

<a id="readOnlyRowsToggle">Click</a>  
<table>  
  <tr><td>row</td></tr>  
  <tr><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
  <tr class="readOnlyRow"><td>row</td></tr>  
</table>

JavaScript的

$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle();  
    });  
});  

Answer 1

我在表中的tr上遇到了同样的错误.我使用IE8的脚本调试工具进行了一些调查.

首先我尝试使用切换:

$(classname).toggle();

这适用于FF但不适用于IE8.

然后我尝试了这个:

if($(classname).is(":visible"))//IE8 always evaluates to true.
     $(classname).hide();
else
     $(classname).show();

当我调试这段代码时,jquery一直认为它是可见的.所以它会关闭它,但它永远不会打开它.

然后我把它改成了这个:

var elem = $(classname)[0];
if(elem.style.display == 'none')
     $(classname).show();
else
{
     $(classname).hide();               
}

这工作得很好.jQuery有一个错误,或者我的HTML有点棘手.无论哪种方式,这解决了我的问题.

Answer 2

升级到jQuery 1.4修复了这个问题,虽然我很喜欢,但是这个页面上唯一对我有用的"修复"是Dough boy的回答:

$(document).ready(function() {  
  $(".readOnlyRow").hide();  
  $("#readOnlyRowsToggle").click(function() {  
    $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
  });  
});

Answer 3

删除您的期间<tr class=".readOnlyRow"><td>row</td></tr>.jQuery类选择的语法是在其前面加上句点,但在HTML代码中不需要它.