jquery - 当我单击最后一个列表元素时，我的页脚向下移动然后向上移动...使用 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();
});

我通过你的解决方案得到了这个乔治:

我在#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