jQuery .toggle() 不适用于 IE 中的 TRs

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 中有a bug 或者我的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 代码中不需要它。

Answer 4

我发现虽然这在 IE8 中不起作用

$('.tableRowToToggle').toggle();

但这确实有效：

$('.tableRowToToggle').each(function(){this.toggle()});

从之前发布的链接 jAST 中得到这个想法

Answer 5

我通过隐藏 TR 元素的子元素解决了这个问题。

toggleTr($(".toggletr"));

function toggleTr(el) {
    $(el).children('td').each(function() {
        $(this).toggle();
    });
}

这对于 FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari 来说似乎没问题。

Answer 6

我自己也遇到过这个问题——我找到的最简单的解决方案是检查：

:not(:隐藏)

而不是

:可见

然后采取相应的行动。 .

Answer 7

看起来这已在 JQuery 1.4 中得到修复。

Answer 8

表格是一段有趣的 html，它们不像其他元素那样遵循常规规则。

基本上表格显示为表格，表格有特殊规则，但由于浏览器大战的疯狂过山车，这在旧版浏览器中没有得到妥善处理。

基本上在旧版浏览器中，表格显示属性很少，并且流程基本上没有记录，因此最好不要更改 table/tr/td 标记的预定义值，而是添加和删除以下类并简单地切换类本身表/tr/td 属性的 on 和 off。

.tableHide {
    display: none;
}

<table>
<tr><td> Visible content</td></tr>
<tr><td> Visible content</td> <td class="**tableHide**"> **Hidden Content**</td></tr>
</table>

这样做的原因是它是一个单独的类，用于切换显示，因此表格本身没有任何更改，也不需要更改任何表格属性，显示和任何相关的布局属性都被保留即使浏览器在幕后并不那么容易。

Answer 9

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

有一个 jQuery 错误，IE8 会导致所有内容都评估为 true。上面试试

Answer 10

我遇到了同样的问题，但我找到了一个很好的解决方法，可以让 toggle/slideToggle 在所有浏览器中工作。

<a id="myButton">Click</a>
<div id="myDiv" display="none">lorem ipsum .... text ....</div>  

现在是 JS：

    jQuery("#myButton").click(function () {
  var currentDisplay = jQuery("#myDiv").css("display"); // save the current Display value
  jQuery(#myDiv).slideToggle("fast", function () { // lets do a nice slideToggle
    // this code will run AFTER the sildeToggle is done
    // so if slideToggle worked fine (in FF, chrome, ...) this will have no evect, since the value is already block or none
    // but in case IE 8 runs this script, it will set the css display to the current value
    if (currentDisplay == "none") {
      jQuery(#myDiv).css('display', 'block');
    }else {
      jQuery(#myDiv).css('display', 'none');
        }
    });
    return false;
});

结果是slideToggle 在所有浏览器中都可以正常工作，除了 IE8，在其中看起来很奇怪（混乱的幻灯片），但它仍然可以工作。

Answer 11

我注意到，如果您包含 jquery mobile，则切换可能不适用于 iphone。如果您在加载 jquery mobile 之前运行切换 (.ready) 则很好。

Answer 12

因为您让他们点击<a>，所以您需要该函数返回 false。

Answer 13

我也注意到了这一点。可能您必须在每个 td 上切换一个类。还没有尝试过这个解决方案，所以请告诉我！

对于其他 - 这是特定于 IE8，而不是 6 或 7。

编辑

很明显，您没有像-1 所证明的那样尝试这个，就像我刚刚做了很好的结果（在我的情况下）。

CSS

tr.hideme td { 显示：无 }

JS

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});