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

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

：否（：隐藏）

而不是

：可见

然后采取相应行动。

Answer 7

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

Answer 8

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

基本上表格显示为表格，表格有特殊规则，但在旧浏览器中没有正确处理，因为浏览器大战的过山车很疯狂。

基本上在较旧的浏览器中，表显示属性是最小的，并且流程基本上没有记录，因此不是更改表/ tr / td标记的预定义值，而是最好添加和删除以下类，只需切换类本身打开和关闭表/ tr / td的属性。

.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之前运行toggle（.ready），那就好了。

Answer 12

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

Answer 13

我也注意到了这一点。可能你需要在每个td上切换一个类。尚未尝试过这个解决方案，请告诉我！

对于其他人 - 这是针对IE8的，而不是6或7。

修改

显然你没有尝试过这一点，正如-1所示，因为我刚刚做了很好的结果（在我的情况下）。

CSS

tr.hideme td {display：none}

JS

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

jQuery .toggle（）在IE中不与TR一起使用

13 个答案: