jQuery 隐藏显示 div 在 Internet Explorer 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/513735/
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 hide show div doesn't work in Internet Explorer
提问by ferixxx
When I click togglediv, commentdivmust be visible or hidden. The following code is running on Firefox but not Internet Explorer:
当我单击 时togglediv，commentdiv必须可见或隐藏。以下代码在 Firefox 上运行，但不在 Internet Explorer 上运行：
$(document).ready(function(){
$("#togglediv").click(function(){
if( $("#commentdiv").is(":visible") ) {
$("#commentdiv").hide("slow");
$("#togglediv").text("show");
} else {
$("#commentdiv").show("slow");
$("#togglediv").text("hide");
}
});
});
回答by jeroen
There is a function togglein jquery that does exactly what you want without having to check for visibility:
jquery 中有一个功能切换，可以完全按照您的要求执行操作，而无需检查可见性：
$("#commentdiv").toggle("slow");
回答by cletus
I would try:
我会尝试：
$(document).ready(function() {
$("#togglediv").click(function() {
// note: do this first because the :hidden test fails if you
// do it after triggering a slow animation
$("#togglediv").text($("#commentdiv").is(":hidden") ? "Hide" : "Sgiw");
$("#commentdiv").toggle('slow');
});
});
Edit:In response to your comment, this example works perfectly for me in IE7/FF3. Note:I did have to reverse the order of statements when using slow effects. Interesting!
编辑：为了回应你的评论，这个例子在 IE7/FF3 中非常适合我。 注意：在使用慢速效果时，我确实必须颠倒语句的顺序。有趣的！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
#togglediv { padding: 5px; background-color: yellow; }
#commentdiv { padding: 5px; background-color: #CCC; height: 100px; }
</style>
</head>
<body>
<div id="togglediv">Hide</div>
<div id="commentdiv">thanks for answer. but i have tried this code, it was okay. i want to use toggle("slow") effect. this effect is runing firefox, but not i.e. is it a bug?</div>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("#togglediv").click(function() {
$("#togglediv").text($("#commentdiv").is(":hidden") ? "Hide" : "Show");
$("#commentdiv").toggle('slow');
});
});
</script>
</body>
</html>
回答by Steerpike
You're missing a closing }
你错过了一个结束}
Try
尝试
$(document).ready(function(){
$("#togglediv").click(function(){
if($("#commentdiv").is(":visible")){
$("#commentdiv").hide("slow"); $("#togglediv").text("show");
}
else{
$("#commentdiv").show("slow"); $("#togglediv").text("hide");
}
}
});
回答by partkyle
Something I noticed that was interesting, and I think it was touched on above by cletus, is that if you switch the order of the "show" line with the "text" line - it seems to start working. I have no explanation for this; it would be nice to know what is going on behind the scenes.
我注意到一件很有趣的事情，我认为 cletus 在上面提到过，如果您将“显示”行的顺序与“文本”行切换 - 它似乎开始工作。我对此没有任何解释；很高兴知道幕后发生了什么。
回答by sandeep
if(document.getElementById(ThisObj).style.display == 'none')
{
document.getElementById(ThisObj).style.display = 'block';
}
else
{
document.getElementById(ThisObj).style.display = 'none';
}
it works:)
有用：）
