jquery - jquery / css向下滑动但子元素不应该移动

Question

我正在使用 jQuerydiv向下滑动。在divas 4 列表项中，其中包含图像和内容。

当父div级上下滑动时，里面的内容会上下移动。但是，我希望内容保持静态，所以div就像一个屏幕被拉过里面的内容。

有一个我希望如何在这里工作的例子：http ://www.google.co.uk/nexus/

单击“选择设备”链接。

您应该看到里面的图像没有上下移动，而是保持静止。

jQuery slideUp / slideDown 不这样做。

这说明了问题：http: //jsfiddle.net/uqdGe/1/

红色列随父容器上下移动。我希望他们保持静止

Answer 1

It looks like slideToggle() scales the padding as it collapses .container. Instead of putting padding on the container, try using a margin on the li:

http://jsfiddle.net/xFGPb/1/

li {
    display:inline-block;
    width: 100px;
    margin: 2em 10px 0 0;   /* add 2em margin top */
    background: red;
}

.container {
    background: green;
    padding: 0 2em 2em;    /* remove 2em padding from the top */
}

ul {                       /* css reset */
    margin: 0;
    padding: 0;
}