javascript - 如何使用 CSS 创建 "two layer"列表？

Question

我要使用类似于经典 iPhone“滑动显示”外观的东西 CSS

我的目标代码结构是这样的

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

因此，使用 javascript 和 css transition，我可以让顶层滑开并显示底层。我已经尝试将底层设置为顶部:-(li 的高度)和 z-index -1 哪种工作(它们确实重叠)除了 div 之间有很大的空间因此(边距 0 填充 0 没有解决这个问题)

我还能如何实现它？

Answer 1

我真的认为使用同一个列表来完成这个是一个糟糕的主意，你应该使用两个不同的 ul 的 http://jsfiddle.net/8JYA2/

<ul class="list-1">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
<ul class="list-2">
  <li>Back One</li>
  <li>Back Two</li>
  <li>Back Three</li>
  <li>Back Four</li>
</ul>

我可能是错的，但你为什么要用那个代码结构？