JQuery 切换在 IE6 中未正确折叠答案

【问题标题】：JQuery toggle not collapsing properly in IE6JQuery 切换在 IE6 中未正确折叠
【发布时间】：2011-11-25 17:43:06
【问题描述】：

我有 3 个 div 使用 JQuery 的切换功能来折叠 div：

在 Firefox 中 div 可以正常折叠，但在 IE6（目标浏览器）中会发生这种情况：

如果我调整 IE 窗口的大小，div 会恢复正常，就像在 Firefox 中一样。

我试图将代码简化为最简单的形式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>BIIS Portal</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="cache" />
<link rel="stylesheet" type="text/css" media="all" href="../assets/stylesheets/core-css.css" />
<script type="text/javascript" src="../assets/js/core-js.js"></script>
<!-- This script doesn't seem to work when put it in its own .js file... why? -->
<script type="text/javascript">
$(document).ready(function(){
    //Hide (collapse) the toggle containers on load
    $(".toggle-container").hide(); 

    //Show all containers with class toggle-opened
    //Remove the opened class
    //Find the trigger for the now opened container and apply the active class
    $(".toggle-opened").show().removeClass("toggle-opened").prev(".toggle-trigger").addClass("active");

    //Switch the Open and Close state per click then slide up/down (depending on open/close state)
    $(".toggle-trigger").click(function(){
        $(this).toggleClass("active").next().toggle();
        return false; //Prevent the browser jump to the link anchor
    });
});
</script>
</head>
<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <div id="body">
            <div>
                <div class="portlet">
                    <div class="portlet-header">
                        <div class="portlet-title">
                        <h2>BI - External data Control</h2>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div>
                            <h3 class="toggle-trigger">External Data Configuration</h3>
                            <div class="toggle-container toggle-opened">
                                blah
                            </div>
                            <h3 class="toggle-trigger">Current Notifications</h3>
                            <div class="toggle-container toggle-opened">
                                blah
                            </div>
                            <h3 class="toggle-trigger">General Information</h3>
                            <div class="toggle-container toggle-opened">
                                blah
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

核心-css.css：

@import "base.css";
@import "framework.css";
@import "elastic.css";
@import "superfish.css";

@import "/application/css/jquery.autocomplete.css";
@import "/application/css/hspi-content-nav.css";
@import "/application/css/jquery-ui/jquery-ui-1.8.12.custom.css";

core-js.js 只是几个 JQuery 库的缩小，即：

jQuery JavaScript 库 v1.5.2
jQuery Cycle 插件（带有转换定义）版本：2.86 (05-APR-2010)
jQuery Cycle 插件转换定义版本：2.72
jQuery UI 1.8.12
jQuery UI 小部件 1.8.12
jQuery UI 鼠标 1.8.12

我不太确定发生了什么，因为我主要是复制现有代码。我需要让它在 IE 中正常工作，因此不胜感激。

【问题讨论】：

标签： javascript jquery html toggle collapse

【解决方案1】：

@米奇。我认为你的主要问题是你的 CSS 样式。您不提供 CSS 代码，但下一个示例在我的 IE6-8 和 FF7 测试中工作（除了 IE6-7 不支持 CSS content 样式）http://jsfiddle.net/2YyXC/

HTML：

<div id="wrapper">
    <div id="header">
    </div>
    <div id="body">
        <div>
            <div class="portlet">
                <div class="portlet-header">
                    <div class="portlet-title">
                    <h2>BI - External data Control</h2>
                    </div>
                </div>
                <div class="portlet-body">
                    <div>
                        <h3 class="toggle-trigger toggle-trigger-active">External Data Configuration</h3>
                        <div class="toggle-container toggle-container-opened">
                            blah
                        </div>
                        <h3 class="toggle-trigger toggle-trigger-active">Current Notifications</h3>
                        <div class="toggle-container toggle-container-opened">
                            blah
                        </div>
                        <h3 class="toggle-trigger toggle-trigger-active">General Information</h3>
                        <div class="toggle-container toggle-container-opened">
                            blah
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

脚本：

$(document).ready(function() {
    $(".toggle-trigger").click(function(){
        $(this).toggleClass("toggle-trigger-active").next().toggleClass("toggle-container-opened");
        return false; //Prevent the browser jump to the link anchor
    });
});

CSS：

.portlet {
    padding: 5px 5px 5px 5px;
    border: 1px solid black;
}

.portlet-body {
     padding: 5px 5px 5px 5px;
}

.portlet-title {
    background-color: black;
    color: white;
    font-family: Verdana;
    font-size: 13px;
    padding: 6px 6px 6px 6px;
}

.toggle-trigger {
    background-color: lightgrey;
    color: black;
    font-family: Verdana;
    font-size: 13px;
    padding: 6px 6px 6px 6px;
}

.toggle-trigger:before {
    content: "► ";
}

.toggle-trigger-active:before {
    content: "▼ ";
}

.toggle-container {
    font-family: Verdana;
    font-size: 13px;
    padding: 6px 6px 6px 6px;
    display: none;
}

.toggle-container-opened {
    display: block;
}

【讨论】：

你好安德鲁。这似乎工作得很好，除了我显然失去了所有的造型。我会玩一下它，看看我是否可以让它看起来像它应该的那样，而不会使切换器功能失调。谢谢。

【解决方案2】：

使用 .toggle-container 和/或 .toggle-closed（不确定您是否使用该类）为 ie6 添加条件 cmets display:none

【讨论】：

如何在 jQuery 中添加 display:none 作为 IE6 特定的 CSS 属性？顺便说一句，据我所知，没有切换关闭。我认为在 jQuery 代码中删除 toggle-opened 类是一种隐含的方式，表示它已关闭。
HTML 中的哪个位置？我对这些东西比较陌生。
在你的元素之后，因为没有切换关闭，使用 .toggle-container{display:none} .toggle-container.toggle-opened{display:block}
嗯，这似乎不起作用 - 可能是因为似乎没有 toggle-closed 类。

【解决方案3】：

一个常见的问题是，事情根本没有按应有的方式重绘。如果调整窗口大小或缩放页面工作，这是一个重绘错误，据我所知，除了尝试找到其他可行的编码方式之外，您在代码中绝对无能为力。

【讨论】：