jQuery .toggle（）不适用于IE中的TR [英] jQuery .toggle() not working with TRs in IE

问题描述

我使用jQuery的toggle（）来显示/隐藏表格行。它在FireFox中工作正常，但在IE 8中无效。

.show（） / .hide（）可以正常工作。

slideToggle（）在IE中不起作用时 - 它显示一秒钟，然后再次消失。

我的HTML看起来与此类似

 在FireFox中正常工作。 < a id =readOnlyRowsToggle>点击< / a> 
< table> 
< tr>< td>行< / td>< / tr> 
< tr>< td>行< / td>< / tr> 
< tr class =readOnlyRow>< td>行< / td>< / tr> 
< tr class =readOnlyRow>< td>行< / td>< / tr> 
< tr class =readOnlyRow>< td>行< / td>< / tr> 
< / table> 
  

JavaScript

  $（document）.ready（function（）{
 $（。readOnlyRow）。hide（）; 
 $（＃readOnlyRowsToggle）。 b $ b $（。readOnlyRow）。toggle（）; 
}）; 
}）; 
  

解决方案

。我使用IE8的脚本调试工具做了一些调查。

首先，我尝试使用toggle：

  $（classname）。切换（）; 
  

这适用于FF，但不适用于IE8。

然后我试过这个：

$ p $ if（$（classname） .is（：visible））// IE8总是评估为true。
$（classname）.hide（）;
else
$（classname）.show（）;


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

然后，我将其更改为：

  var elem = $ （类名）[0]; 
 if（elem.style.display =='none'）
 $（classname）.show（）; 
 else 
 {
 $（classname）.hide（）; 
} 
  

工作正常。 jQuery的一个bug 或者可能是我的html有点棘手。无论哪种方式，这解决了我的问题。

I am using jQuery's toggle() to show/hide table rows. It works fine in FireFox but does not work in IE 8.

.show()/.hide() work fine though.

slideToggle() does not work in IE either - it shows for a split second then disappears again. Works fine in FireFox.

My HTML looks similar to this

<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();  
    });  
});  

解决方案

I've experienced this same error on tr's in tables. I did some investigation using IE8's script debugging tool.

First I tried using toggle:

$(classname).toggle();

This works in FF but not IE8.

I then tried this:

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

When I debugged this code, jquery always thought it was visible. So it would close it but then it would never open it back.

I then changed it to this:

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

That worked fine. jQuery's got a bug in it or maybe my html's a little screwy. Either way, this fixed my issue.

这篇关于jQuery .toggle（）不适用于IE中的TR的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！