如何使用CSS创建“两层”列表？

Question

我正在寻找类似于经典iPhone“Swipe to reveal”外观的东西 CSS

我的目标代码结构就像是

<ul>
    <li>Top Content</li>
    <li>Bottom Content</li>
</ul>

因此，使用javascript和css过渡我可以让顶层滑开并显示底层。我已经尝试将底层设置为顶部： - （li的高度）和z-index -1哪种工作（它们重叠）除了div之间有一个很大的空间（由于这个）（margin 0 padding 0 didn）不解决这个问题。

我还能怎样实现这个？

Answer 1

在得到一些帮助和实验之后，我现在得到了一个有效的解决方案。

解决方案是制作一个列表，但每个li放两个div并将div分层。 然后使用javascript修改div上的左右百分比，以便顶部div滑落。代码看起来像这样

<ul>
  <li><div>Top Content</div></li>
  <li><div>Bottom Content</div></li>
</ul>

结合我在关于在顶级内容上设置更高的z-index之前的想法，它很有效。