25

我正在使用 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();  
    });  
});
4

13 回答 13

46

我在表格中的 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 有点古怪。不管怎样，这解决了我的问题。

于 2009-07-09T15:33:56.157 回答
9

升级到 jQuery 1.4 解决了这个问题，虽然我正在这样做，但这个页面上唯一对我有用的“修复”是 Dough boy 的回答：

$(document).ready(function() {  
  $(".readOnlyRow").hide();  
  $("#readOnlyRowsToggle").click(function() {  
    $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
  });  
});
于 2010-02-24T16:57:42.417 回答
6

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

于 2009-06-10T12:12:50.450 回答
4

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

toggleTr($(".toggletr"));

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

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

于 2009-08-25T11:54:07.527 回答
4

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

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

但这确实有效：

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

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

于 2009-08-24T09:29:32.693 回答
3

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

:not(:隐藏)

代替

：可见的

然后采取相应的行动。.

于 2009-07-15T18:08:06.627 回答
2

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

于 2010-04-29T17:18:57.603 回答
2

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

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

基本上在旧浏览器中，表格显示属性很少，并且流程基本上没有记录，因此最好不要更改 table/tr/td 标记的预定义值，而是添加和删除以下类，并简单地打开和关闭类本身关于table/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>

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

于 2012-01-09T18:05:30.620 回答
1 
$(document).ready(function() {  
    $(".readOnlyRow").hide();  
    $("#readOnlyRowsToggle").click(function() {  
        $(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');  
    });  
});

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

于 2009-07-14T14:39:07.580 回答
1

我遇到了同样的问题，但我找到了一个很好的解决方法，可以在所有浏览器中制作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，它看起来很奇怪（混乱的幻灯片），但它仍然可以工作。

于 2010-09-25T20:38:09.450 回答
0

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

于 2013-06-03T12:44:24.783 回答
-1

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

于 2009-06-10T12:10:34.340 回答
-1

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

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

编辑

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

CSS

tr.hideme td {显示：无}

JS

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});
于 2009-06-10T12:44:02.430 回答