Question

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

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

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

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

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

Answer 1

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

.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更改为动画为140px，而不是115px。

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

使用jQuery滑动list元素而不影响其他列表元素

1 个答案: