堆叠虚拟纸并通过 CSS 重新排列它们答案

【问题标题】：Stacking virtual sheets of paper and re-arranging them via CSS堆叠虚拟纸并通过 CSS 重新排列它们
【发布时间】：2011-08-31 06:18:50
【问题描述】：

我试图将一摞纸张模拟成一个真实的活生生的隐喻。我希望这些表整齐地堆叠在一起，只显示每张覆盖的表的标题并覆盖其余部分（内容）。此处显示：

！-------------- |表 1 +-------------- |表 2 +-------------- |表 3 | | |

我还希望能够“激活”任何给定的工作表，这意味着所有其他工作表都应该向下移动以显示活动工作表的内容。

如下所示：

！-------------- |表 1 +-------------- |表 2 | |表 2 内容 |去这里 |这张表是 | '积极的' | +-------------- |表 3 | | |

为此，我尝试设置一些具有负上边距的 DIV 容器（仅适用于具有固定高度的 DIV）。我还创建了一些 .active 类以附加到活动工作表的 DIV 以显示其内容。

我的 CSS：

。床单 { 位置：相对；宽度：650 像素；高度：550px；边距：-465px 自动 0 自动； } .sheet .active + .sheet { 边距：0 自动 0 自动； }

您可能会立即看到，这仅适用于固定高度。我正在寻找一种同样适用于床单可变高度的解决方案。

有什么想法吗？

（顺便说一句：不需要支持像IE这样的蹩脚浏览器

【问题讨论】：

标签： jquery css

【解决方案1】：

如果我明白你想要什么，这正是 jQuery UI accordion 所做的。

你可以用这个标记来设置它

<div id="sheets">
  <h3><a href="#sheet1">Sheet 1</a></h3>
      <div>
       Content for sheet 1 goes here
      </div>
      <h3><a href="#sheet2">Sheet 2</a></h3>
      <div>
       Content for sheet 2 goes here
      </div>
      <h3><a href="#sheet3">Sheet 3</a></h3>
      <div>
       Content for sheet 3 goes here
      </div>
</div>

还有这个 jQuery

$("#sheets").accordion({
  autoHeight: false
});

根据其原始高度调整内容大小。

【讨论】：