当我点击我的上一个列表元素时，我的页脚向下移动然后向上...使用slideToggle（）

Question

我的页脚中有一个列表，有一些链接，当我点击我的上一个列表元素“查看更多链接”时，我用jQuery slideToggle（）将我的列表替换为另一个。

但是，当我这样做时，我看到我的页脚底部再次向下移动。

你知道我该如何解决这个问题吗？我有我的例子：

http://codepen.io/anon/pen/JEBql

这是我的jQuery：

$('.toggle').click(function () {
    $('#list1,#list2').slideToggle();
});;

$('#change_links1').click(function(e) {
    e.preventDefault();
});

$('#change_links2').click(function(e) {
    e.preventDefault();
});

我用你的解决方案得到这个George：

我将背景黄色放在我的#col div中，蓝色是我的＃footer1。

Answer 1

大震动来自你<ul>上的原始边缘。如果移除该边距，则大的震动消失：

<强> CSS

#footer1 ul{
    margin:0;
    list-style:none; 
}

JSFiddle

之后看到的微小的1像素移动来自幻灯片动画，而不是同步动画。

您可以使用jQuery通过在页面加载时设置#col的高度来“修复”：

<强>的JavaScript

$('#col').height(function(_,v){ return v; });

JSFiddle