Question

我试图将纸叠作为一个真实的比喻。我希望这些床单整齐地堆叠在一起，只显示每个覆盖的纸张标题并覆盖其余部分（内容）。如图所示：

!--------------
| Sheet 1
+--------------
| Sheet 2
+--------------
| Sheet 3
|
|
|

我还希望能够“激活”任何给定的纸张，这意味着所有其他纸张应向下移动以揭示活动纸张的内容。

如下所示：

!--------------
| Sheet 1
+--------------
| Sheet 2
|
| Sheet 2 content
| goes here
| this sheet is 
| 'active'
|
+--------------
| Sheet 3
|
|
|

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

我的CSS：


    .sheet {
      position: relative;
      width: 650px;
      height: 550px;    
      margin: -465px auto 0 auto;
    }


    .sheet .active + .sheet {
      margin: 0 auto 0 auto;
    }

正如您可能立即看到的那样，这仅适用于固定高度。我正在寻找一种解决方案，也可以使用不同高度的纸张。

有什么想法吗？

（顺便说一句：不需要像IE＆lt; 9那样支持糟糕的浏览器）

Answer 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
});

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

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

1 个答案: