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

- Robert MacLean

---

IE8 中的 TD 也存在同样的问题。 - Cros

Answer 1

我在表格中的tr标签上遇到了这个错误。我使用IE8的脚本调试工具进行了一些调查。

首先，我尝试使用toggle方法：

$(classname).toggle();

这在Firefox上可行，但不适用于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里可能有一个bug，或者我的HTML代码有点问题。总之，这个方法修复了我的问题。

- Brian Bolton

---

太好了。我也发现了这个 bug，这个建议在几秒钟内解决了我的问题。非常感谢。 - Aaron

谢谢，伙计。又是一集“StackOverflow拯救了我的工作！” - penderi

elem.style.display 应该改为 elem.css('display')。 - Martin

看起来，这行代码： var elem = $(classname)[0]; 限制了函数仅能切换具有该类名的第一个元素[0]。如果您想同时切换几个页面元素，该怎么办呢？如何才能使所有元素正确地进行切换？ - Jen

@Jen：$(classname)[0] 不仅仅是切换第一个元素，它只是检查所有选定元素中的第一个元素是否可见或隐藏。基于该元素，所有选定的元素（包括第一个元素）将被显示或隐藏。 - Jules Colle

@Martin - 只有当第一行是 var elem = $(classname) 时才能起作用。然而，[0] 检索要使用的 DOM 元素而不是 jQuery 对象。DOM 元素没有 css() 函数，因此您的替换将无法工作。 - Matt Huggins

Answer 2

升级到jQuery 1.4版本可以解决这个问题。不过，与此同时，在这个页面上，我发现唯一有效的“修复”方法是来自 Dough boy 的回答。

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

- Robin Duckett

---

我已经阅读了jQuery的.toggle()文档...但我仍然不明白上面的切换代码是如何工作的。你/有人能否解释一下吗？ - runrig

算了，我现在看到调用布尔型的文档了：.toggle( showOrHide ) - runrig

Answer 3

从你的<tr class=".readOnlyRow"><td>row</td></tr>中删除句号。jQuery选择类的语法是在前面加上一个句点，但在HTML代码中不需要。

- Cᴏʀʏ

---

很敏锐的发现，但不幸的是并不是问题的原因。那是由于我重新输入问题造成的。我已经修复了问题，但问题仍然存在。 - Robert MacLean

你尝试过为你的.readOnlyRow类定义一些CSS并使用display:none吗？然后你可以切换CSS类（toggleClass），而不是让jQuery去计算可见性的切换。 - Cᴏʀʏ

Answer 4

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

toggleTr($(".toggletr"));

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

这似乎在FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari上都没问题。

- JSVS

Answer 5

我发现这个在IE8中不起作用：

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

但这个就可以了：

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

从jAST之前发布的链接中得到的灵感。

- Priit

Answer 6

我最近也遇到了这个问题——我发现最简单的解决方法是检查：

:not(:hidden)

而不是

:visible

然后根据情况采取行动...

- marclar

---

在IE8中产生了差异。谢谢！ - Alec

Answer 7

.tableHide {
    display: none;
}

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

是HTML中一个有趣的元素，它们不像其他元素那样遵循普通规则。基本上，表格会作为表格显示，但是对于表格有特殊规则，但在旧版浏览器中由于浏览器战争的疯狂起伏，这些规则并没有得到充分处理。在旧版浏览器中，表格的显示属性很少，并且流程基本未记录。因此，最好的方法是不要更改表格/tr/td标签的预定义值，而是添加和删除以下类，并仅在table/tr/td的属性上切换类本身。这么做是为了使用单独的类来切换显示，因此不会更改表格本身的任何内容，也不需要更改任何表格属性；即使浏览器在幕后工作时很难保持显示或相关布局属性，这种方法也可以保留它们。请注意保留HTML标签。

- timewaster51

Answer 8

看起来这个问题已经在 JQuery 1.4 版本中得到了修复。

- Maciej

---

我正在使用1.4.2版本，但似乎仍然存在这个问题。 - bobber205

我正在使用1.7.1版本，但仍然遇到了这个问题。 - Chris Dutrow

Answer 9

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

有一个 jQuery 的 bug，IE8 会导致所有的东西都被评估为 true。请尝试以上方法。

- Dough boy

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，在其中看起来有点奇怪（幻灯片混乱），但它仍然可以工作。

- Zauberfisch