0

我试图向上滑动一个列表元素并显示更多似乎隐藏在列表元素“下方”的内容，但是当动画发生时，所有其他列表元素都会略微向下跳。当我删除列表元素下的内容但保留动画时，一切正常。

如何在不影响列表中其他元素的情况下完成这项工作？

我很难解释这一点，所以这里是我所说的一个小提琴：http: //jsfiddle.net/YNBxz/1377/

单击视图部分中的任何一个块以查看动画。

如果你注释掉jQuery(this).children('.block-content').slideToggle(500);你可以看到它在动画中应该是什么样子。

4

1 回答 1

1

您需要更改 to 的.block-content位置position: absolute。这将修复其他li元素的滑动。然后，要固定 的定位.block-content，删除width: 100%，将正确的定位更改为right: 0，然后添加top: 45px。然后的CSS.block-content是：

.block-content {
    font-size: 12px;
    font-family: Helvetica, sans-serif;
    display: block;
    background: #333;
    padding: 10px;
    position: absolute;
    top: 45px;
    right: 0px;
    height: 120px;
}

此外，如果您希望底部.block-content与底部li对齐，请将 jquery 更改为动画到 140 像素，而不是 115 像素。

可以看到结果：http: //jsfiddle.net/YNBxz/1379/

于 2013-08-13T19:26:42.533 回答