jQuery切换无法在IE6中正常折叠
[英]JQuery toggle not collapsing properly in IE6
问题描述
I've got 3 divs using JQuery's toggle function to collapse divs: 
我有3个使用JQuery的toggle函数折叠div的div：
The divs collapse fine in Firefox, but in IE6 (target browser), this happens: divs在Firefox中可以正常折叠，但是在IE6（目标浏览器）中，会发生以下情况：
If I resize the IE window, the divs go back to looking normal, as they do in Firefox. 如果我调整IE窗口的大小，则div会恢复正常，就像在Firefox中一样。
I've tried to get the code down to its simplest form: 我试图将代码简化为最简单的形式：
<!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>
core-css.css: core-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 is merely several JQuery libraries minified, namely: core-js.js只是几个精简的JQuery库，即：
- jQuery JavaScript Library v1.5.2 jQuery JavaScript库v1.5.2
- jQuery Cycle Plugin (with Transition Definitions) Version: 2.86 (05-APR-2010) jQuery Cycle插件（带有过渡定义）版本：2.86（05-APR-2010）
- jQuery Cycle Plugin Transition Definitions Version: 2.72 jQuery Cycle插件转换定义版本：2.72
- jQuery UI 1.8.12 jQuery UI 1.8.12
- jQuery UI Widget 1.8.12 jQuery UI小部件1.8.12
- jQuery UI Mouse 1.8.12 jQuery UI鼠标1.8.12
I'm not too sure what's happening, as I've mostly copied existing code. 我不太确定发生了什么，因为我主要复制了现有代码。 I need to get it working right in IE, so any advice is appreciated. 我需要让它在IE中正常工作，因此请多多指教。
3 个解决方案
解决方案1
0 2011-09-27 05:06:03
使用.toggle-container和/或.toggle-closed（不确定是否使用该类）为ie6添加条件注释display：none
解决方案2
0 2011-09-27 05:06:18
A common problem is that things simply aren't redrawn as they should be. 一个普遍的问题是，事情根本没有按照其应有的方式重新绘制。 If resizing the window or zooming the page work, it's a redraw error and as far as I know there's abolutely nothing you can do about it in code, other than trying to find some other way of coding it that works. 如果调整窗口大小或缩放页面大小，这是重绘错误，据我所知，除了尝试找到其他可行的编码方式之外，您几乎无法在代码中对其进行任何处理。
解决方案3
0 已采纳 2011-09-27 06:44:39
@Mitch. @米奇 I think your main problem it's your CSS styles. 我认为您的主要问题是CSS样式。 You dont provide CSS code, but next example is worked in my tests in IE6-8 and FF7 (except that IE6-7 do not support CSS content style) http://jsfiddle.net/2YyXC/ 您没有提供CSS代码，但是下一个示例在我的IE6-8和FF7测试中得到了解决（除了IE6-7不支持CSS content样式） http://jsfiddle.net/2YyXC/
HTML: 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>
SCRIPT: 脚本：
$(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: 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.