使用 IE8 切换功能怪异答案

【问题标题】：Toggle function weirdness with IE8使用 IE8 切换功能怪异
【发布时间】：2013-11-19 21:13:49
【问题描述】：

我查看了许多其他类似的主题，但我的问题更基本。由于我是 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 的默认状态由内联样式元素定义，如下所示：

<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 : inline-block;吗？
display:none 样式在每个 div 中是内联的，但是，为了回答您的问题 - 是的，所有 div 都在一个具有 css display: block 样式的包装器中。
显示：显示不是一回事。
更好的说法是，show 不是显示属性的有效值，请参阅参考 MDN 中的 CSS display:。
哦，好的。我想这是一种不必要的样式，因为默认情况下会显示这些样式。这仍然不能告诉我为什么带有内联 display:none 的 .sidebar div 没有显示在 IE8 中启动切换的时间？

标签： jquery html internet-explorer-8 toggle show-hide

【解决方案1】：

好的，我测试了 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>

<script type="text/javascript">
$('document').ready(function(){
    $('#Dswitch').on('click',function() {
        $('.body').toggle();
        $('.sidebar').toggle();
        $('.legend').toggle();
    });

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

           });
});
</script>
<style type="text/css">
    body {
      font-family: Arial,Helvetica,sans-serif;
    }
    #wrapper {
      width: 60%;
      display: block;
    }
</style>

</head>
<body>
<div id="wrapper">
    <div class="body">
        Some body stuff to show at page load <br>
        <input type='button' value='Click to switch sidebar' id='Dswitch'>
    </div>
    <div class="sidebar" style='display:none'>
        Some sidebar stuff to show on button click
        <br>
        <input type="button" value='Click to swtich back to body' id="Aswitch">
    </div>
    <div class="legend">
        Some legend stuff to show at page load
    </div>
</div>
</body>
</html>

【讨论】：

感谢您在 IE8 中的工作，正如您所说。我不确定为什么将代码专门包装在 $(document).ready 函数中会有所不同？我猜 Chrome 和现代浏览器在执行 javascript 方面更聪明。
您应该始终将其包裹在文档准备就绪 - 这意味着它在 DOM 准备就绪时执行。

【解决方案2】：

{display: show}

应该是

{display: block}

IE8 可能无法像其他人一样处理您的广告素材 CSS。

【讨论】：