Question

我看过许多其他类似的主题，但我的问题更基本。由于我是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不会切换显示。

有什么想法吗？

Answer 1

{display: show}

应该是

{display: block}

IE8可能无法处理您的广告素材CSS以及其他人。

Answer 2

好的我测试了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切换功能怪异

2 个答案: