1

我正在创建一个支持 jQuery 的网页，其中包含指向外部站点的图像链接，用作浏览器主页。每组相关链接（开发、社交等）都包含在一个文件夹中，可以通过单击其标题来展开或折叠该文件夹。这在 Firefox、Chrome 和 Safari 中运行良好。

工作网页截图

在 Internet Explorer 中（惊喜！）我得到了这种奇怪的行为。假设有三个垂直堆叠的文件夹。如果我折叠第一个文件夹，则第二个和第三个文件夹及其内容会向上移动以填充空间，但第二个文件夹的内容除外，它们在页面上保持相同的绝对位置。

我已经创建了页面的精简版本，显示问题所需的最低限度。在这里，我有名为“Red”、“Green”和“Blue”的文件夹，每个文件夹都包含一个图像。

示例页面截图

如果我单击红色标题，蓝色图像将随其文件夹向上移动，但绿色图像保持在相同位置，现在位于蓝色图像后面。

单击读取文件夹标题后示例页面的屏幕截图

但是，如果我将文件夹标题和正文元素上的边框样式设置为“无”而不是“实心”，则绿色图像会按预期与其他元素一起移动。

网页文件夹.html：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type='text/javascript' src='jquery-1.7.2.min.js'></script>
    <script type='text/javascript' src='folder.js'></script>
    <link rel='stylesheet' type='text/css' href='style.css'></link>
    <title>Folder Example</title>
  </head>
</html>

样式表 style.css：

div.folder-header
{
  background-color:#f0f0f0;
  border-color:#e0e0e0;
  border-width:1px;
  cursor:pointer;
}

div.folder-body
{
  background-color:#f8f8f8;
  border-color:#e0e0e0;
  border-width:1px;
}

div.link-viewport
{
  position:relative;
}

img.link-image
{
  position:absolute;
  display:block;
  border:none;
}

JavaScript 文件 layout.js：

$(document).ready(function()
{
    var border = true;

    var folder = function(title, src)
    {
        var section = $('<div>').appendTo('body');
        var header = $('<div>').addClass('folder-header').text(title).appendTo(section);
        var folder = $('<div>').addClass('folder-body').appendTo(section);
        var viewport = $('<div>').addClass('link-viewport').css('width', 64).css('height', 64).appendTo(folder);
        var image = $('<img>').addClass('link-image').attr('src', src).appendTo(viewport);

        header.css('border-style', border ? 'solid' : 'none');
        folder.css('border-style', border ? 'solid' : 'none');

        header.click(function()
        {
            folder.toggle();
        });
    };

    folder("Red", "red.png");
    folder("Green", "green.png");
    folder("Blue", "blue.png");
});

图像文件 red.png、green.png 和 blue.png：

图像文件 1

图像文件 2

图像文件 3

任何建议都感激不尽！

4

1 回答 1

1

手风琴似乎在 IE8+ 中工作，但我能够在使用 IE7 模式的 IE9 中看到问题（按 F12 打开 IE 开发工具 -> 浏览器模式 =“IE7”，文档模式 =“IE7 标准”）。我通过进行以下更改使其工作：

CSS：添加overflow: hidden;到规则集中div.folder-body。

JSfolder.toggle(); ：在第 18 行删除并插入

if (folder.height()) { 
    folder.hide(); 
    folder.height(0); }
else { 
    folder.show(); 
    folder.height(64); 
}

不过我不明白为什么！

这是小提琴：http: //jsfiddle.net/EhPk8/25/

于 2012-09-12T17:01:40.513 回答