jQuery .toggle（）不使用IE中的TRS

StackOverflow https://stackoverflow.com/questions/975153

  •  13-09-2019
  •  | 
  •  

题

我正在使用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();  
    });  
});
有帮助吗？

解决方案

我在表格中的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有点棘手。无论哪种方式，这都解决了我的问题。

其他提示

升级到jQuery 1.4修复了此问题，尽管我这样做了，此页面上唯一对我有用的“修复程序”是面团男孩的答案：

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

从您的期间中删除 <tr class=".readOnlyRow"><td>row</td></tr>. 。 jQuery类选择的语法是用一个段进行预处理，但是您在HTML代码中不需要它。

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

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

但这确实有效：

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

从此处发布的链接jast中获取了这个想法

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

toggleTr($(".toggletr"));

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

对于FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari来说，这似乎还可以。

我自己刚遇到这个 - 我发现最简单的解决方案是检查：

：不（：隐藏）

代替

：可见的

然后采取相应的行动。 。

看起来这是在JQuery 1.4中固定的。

表是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>

这样做的原因是，它是一个单独的类来切换显示屏，因此表上没有任何内容，也不需要更改任何表属性，显示以及保留任何相关的布局属性，即使浏览器在幕后并不容易。

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

有一个jQuery错误，IE8会导致所有内容进行评估。上面尝试

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

我注意到，如果您包括jQuery手机，则切换可能对iPhone不起作用。如果您在加载jQuery移动设备之前运行toggle（.dready），则可以很好。

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

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

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

编辑

显然，您没有尝试过-1所证明的那样，就像我刚刚取得的好成绩一样（在我的情况下）。

CSS

tr.hideme td {display：none}

JS

$("#view-advanced").click(function() {
    $("tr.hideme td").toggle();
    return false;
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top