jQuery .toggle() 不适用于 IE 中的 TRs
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/975153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .toggle() not working with TRs in IE
提问by Robert MacLean
I am using jQuery's toggle() to show/hide table rows. It works fine in FireFox but does not work in IE 8.
我正在使用 jQuery 的 toggle() 来显示/隐藏表格行。它在 FireFox 中运行良好，但在 IE 8 中不起作用。
.show()/.hide()work fine though.
.show()/.hide()虽然工作正常。
slideToggle()does not work in IE either - it shows for a split second then disappears again. Works fine in FireFox.
slideToggle()在 IE 中也不起作用 - 它显示一秒钟然后再次消失。在 Firefox 中工作正常。
My HTML looks similar to this
我的 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
JavaScript
$(document).ready(function() {
$(".readOnlyRow").hide();
$("#readOnlyRowsToggle").click(function() {
$(".readOnlyRow").toggle();
});
});
回答by Brian Bolton
I've experienced this same error on tr's in tables. I did some investigation using IE8's script debugging tool.
我在表中的 tr 上遇到了同样的错误。我使用 IE8 的脚本调试工具做了一些调查。
First I tried using toggle:
首先我尝试使用切换：
$(classname).toggle();
This works in FF but not IE8.
这适用于 FF 但不适用于 IE8。
I then tried this:
然后我尝试了这个：
if($(classname).is(":visible"))//IE8 always evaluates to true.
$(classname).hide();
else
$(classname).show();
When I debugged this code, jquery always thought it was visible. So it would close it but then it would never open it back.
当我调试这段代码时，jquery 一直认为它是可见的。所以它会关闭它，但它永远不会打开它。
I then changed it to this:
然后我把它改成了这样：
var elem = $(classname)[0];
if(elem.style.display == 'none')
$(classname).show();
else
{
$(classname).hide();
}
That worked fine. jQuery's got a bugin it or maybe my html's a little screwy. Either way, this fixed my issue.
那工作得很好。jQuery 有一个错误，或者我的 html 有点乱。无论哪种方式，这都解决了我的问题。
回答by Robin Duckett
Upgrading to jQuery 1.4 fixes this, whilst I'm at it though, the only "fix" on this page which worked for me was Dough boy's answer:
升级到 jQuery 1.4 解决了这个问题，虽然我正在解决这个问题，但这个页面上唯一对我有用的“修复”是面团男孩的回答：
$(document).ready(function() {
$(".readOnlyRow").hide();
$("#readOnlyRowsToggle").click(function() {
$(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');
});
});
回答by C???
Remove the period from your <tr class=".readOnlyRow"><td>row</td></tr>. The syntax for jQuery class selecting is to prepend it with a period, but you don't need it in your HTML code.
从您的<tr class=".readOnlyRow"><td>row</td></tr>. jQuery 类选择的语法是在它前面加上一个句点，但在 HTML 代码中不需要它。
回答by C???
I found that while this does not work in IE8
我发现虽然这在 IE8 中不起作用
$('.tableRowToToggle').toggle();
$('.tableRowToToggle').toggle();
but this does work:
但这确实有效：
$('.tableRowToToggle').each(function(){this.toggle()});
$('.tableRowToToggle').each(function(){this.toggle()});
Got the idea from the link jAST posted here before
从之前在这里发布的 jAST 链接中得到了这个想法
回答by J. Visser
I fixed this problem by hiding children of the TR element.
我通过隐藏 TR 元素的子元素解决了这个问题。
toggleTr($(".toggletr"));
function toggleTr(el) {
$(el).children('td').each(function() {
$(this).toggle();
});
}
This seems to be ok for FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari.
这对于 FF3.5/FF3/IE8/IE7/IE6/Chrome/Safari 似乎没问题。
回答by marclar
Just encountered this myself -- the easiest solution I've found is to check for:
我自己刚刚遇到了这个问题——我找到的最简单的解决方案是检查：
:not(:hidden)
：不（：隐藏）
instead of
代替
:visible
：可见的
then act accordingly . .
然后采取相应的行动。.
回答by Maciej
Looks like this has been fixed in JQuery 1.4.
看起来这已在 JQuery 1.4 中修复。
回答by timewaster51
Tables are an interesting piece of html, they don't follow normal rules as other elements.
表格是一段有趣的 html，它们不像其他元素那样遵循正常规则。
basically tables display as tables, there are special rules for tables but this was not dealt with properly in older browsers because of the roller coaster of craziness that was the browser wars.
基本上表格显示为表格，表格有特殊规则，但由于浏览器War的疯狂过山车，在旧浏览器中没有正确处理。
Essentially in older browsers tables display properties were minimal and the flow was left largely undocumented so instead of altering predefined values for the table/tr/td tag it is best to instead add and remove the following class and simply toggle the class itself on and off on the attribute of the table/tr/td.
本质上，在较旧的浏览器中，表格显示属性很少，并且流程基本上没有记录，因此最好不要更改 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>
The reason for this is so that it is a separate class being used to toggle the display therefore nothing on the table itself is being changed nor do any of the tables properties need to be altered, display and any related layout properties are preserved even if the browser doesn't make that easy behind the scenes.
这样做的原因是它是一个单独的类，用于切换显示，因此表本身没有任何更改，也不需要更改任何表属性，显示和任何相关的布局属性都会保留，即使浏览器在幕后并没有那么容易。
回答by Zauberfisch
I had the same issue, but I found a nice workaround to make toggle/slideTogglework in all browsers.
我遇到了同样的问题，但我找到了一个很好的解决方法来使toggle/slideToggle在所有浏览器中工作。
<a id="myButton">Click</a>
<div id="myDiv" display="none">lorem ipsum .... text ....</div>
and now the JS:
现在是 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;
});
The result is that slideToggleworks fine in all Browsers, except for IE8, in which will look a weird (messed up slide), but it will still work.
结果是它slideToggle在所有浏览器中都能正常工作，除了 IE8，它看起来很奇怪（乱七八糟的幻灯片），但它仍然可以工作。
回答by Zauberfisch
$(document).ready(function() {
$(".readOnlyRow").hide();
$("#readOnlyRowsToggle").click(function() {
$(".readOnlyRow").toggle($('.readOnlyRow').css('display') == 'none');
});
});
There is a jQuery bug that IE8 causes everything to evaluate to true. Try above
有一个 jQuery 错误，IE8 会导致一切都评估为 true。试试上面
