Jquery 使用IE8切换函数的古怪性_Jquery_Html_Internet Explorer 8_Toggle_Show Hide

Jquery 使用IE8切换函数的古怪性

jquery html internet-explorer-8

Jquery 使用IE8切换函数的古怪性,jquery,html,internet-explorer-8,toggle,show-hide,Jquery,Html,Internet Explorer 8,Toggle,Show Hide,我看过许多其他类似的线索，但我的问题更基本。由于我不熟悉javascript/jQuery，并且学会了使用Chrome作为浏览器进行编码，所以我不太需要支持哑浏览器。但是，由于工作限制，我的一些同事仍然坚持使用IE8 也就是说，我有一个站点，它使用一个按钮来显示/隐藏div，该按钮触发几个切换实例，如下所示： $('#button1').on('click',function() { $('.body').toggle(); $('.sidebar').toggle();

我看过许多其他类似的线索，但我的问题更基本。由于我不熟悉javascript/jQuery，并且学会了使用Chrome作为浏览器进行编码，所以我不太需要支持哑浏览器。但是，由于工作限制，我的一些同事仍然坚持使用IE8

也就是说，我有一个站点，它使用一个按钮来显示/隐藏div，该按钮触发几个切换实例，如下所示：

$('#button1').on('click',function() {
    $('.body').toggle();
    $('.sidebar').toggle();
    $('.legend').toggle();
});

$('#button2').on('click',function() {
    $('.body').toggle();
    $('.sidebar').toggle();
    $('.legend').toggle();
 });

<div class='body' style="display: show">...</div>
<div class='sidebar' style="display: none">...</div>
<div class='legend' style="display: show">...</div>

my div的默认状态由内联样式元素定义，如下所示：

$('#button1').on('click',function() {
    $('.body').toggle();
    $('.sidebar').toggle();
    $('.legend').toggle();
});

$('#button2').on('click',function() {
    $('.body').toggle();
    $('.sidebar').toggle();
    $('.legend').toggle();
 });

<div class='body' style="display: show">...</div>
<div class='sidebar' style="display: none">...</div>
<div class='legend' style="display: show">...</div>

。。。
...
...

当我尝试在chrome中切换div时，一切正常。当我在IE8中尝试此操作时，单击按钮#1会隐藏

.body

和

.legend

，但

.sidebar

div不会切换显示

有什么想法吗

{display: show}

应该是

{display: block}

IE8可能无法像处理其他CSS一样处理您的创造性CSS

好的，我测试了IE8和IE7，两者都可以。这是我的密码：

<!DOCTYPE html>
<html lang="en">
<head>
<title>My Test Page</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


我的测试页面


$（'document'）.ready（函数（）{
$（'#Dswitch'）。在（'click'，function（）上{
$（'.body'）.toggle（）；
$（'.sidebar'）.toggle（）；
$（'.legend'）.toggle（）；
});
$（'#Aswitch'）。在（'click'，function（）上{
$（'.body'）.toggle（）；
$（'.sidebar'）.toggle（）；
$（'.legend'）.toggle（）；
});
});
身体{
字体系列：Arial、Helvetica、无衬线字体；
}
#包装纸{
宽度：60%；
显示：块；
}
页面加载时要显示的一些正文内容

要在按钮单击时显示的一些侧边栏内容


页面加载时要显示的一些图例

是否有

显示：内联块显示：无样式在每个div中都是内联的，但是，为了回答您的问题-是的，所有div都在一个包装器中，该包装器具有cssdisplay:block
样式。显示：显示不是一件事。最好说，show
不是display属性的有效值，请参阅参考MDN。哦，好的。我想这是一种不必要的样式，因为默认情况下，这些样式都会显示出来。这仍然不能告诉我为什么带有inlinedisplay:none
的.sidebar
div在IE8中启动切换时没有显示出来？谢谢，正如您所说，它在IE8中确实起了作用。我不知道为什么将代码专门包装在$（document.ready
函数中会产生不同？我猜Chrome和现代浏览器在执行javascript方面更聪明。您应该始终将其包装在文档准备就绪的周围—这意味着它在DOM准备就绪时执行。