1

我有一个页脚，我使用粘性页脚 css将其保留在页面底部。我希望我的页脚开始折叠，当用户单击一个按钮时，我希望它展开，然后将“展开”链接与div页脚内的不同容器交换div。

我将如何使用 jQuery、HTML 和 CSS 来实现这一点？

编辑：

我希望页脚以大约 20px 的高度开始。在页脚中，应该有一个按钮（我猜是链接），上面写着“更多”或“关于”。当用户单击时，页脚应该变高并显示更精细的 div，并带有替代内容（不是“更多”链接）。

4

1 回答 1

5

这个 jsFiddle演示了用于滑入的基本方法。

以下是您将在那里找到的内容的摘要：

  1. 构建您的 css 以使初始页脚高度为 0。确保将其他依赖于页脚高度的 css 值也归零（即padding-bottom在 #main 和margin-topon 上#footer）。您还需要设置overflow:hiddenon #footer，以确保页脚内容在折叠时不可见。

  2. 在click()链接的处理程序中，使用 jQuery 的animate()函数来增加高度#footer（并同时进行其他必要的填充/边距调整）。

  3. 该animate()函数有四个参数（请参阅此处的文档），最后一个是动画完成时将触发的回调。您可以在此回调函数中触发链接交换。

因此，假设您从CSSStickyFooter中的 HTML/CSS 开始，您的其余代码将如下所示...

您的 CSS（这在stickyfooter css之后）：

#main { 
    padding-bottom: 0; 
}  
#footer { 
    margin-top: 0;
    height: 0; 
    overflow:hidden;
}

你的 Javascript 看起来像这样：

$(document).ready(function(){
    $('#showFooter').click(function(evt) {
        $('#footer').animate({
            'margin-top' : -150,
            'height' : 150
        }, null, null, function() {
            alert("footer slide-in is complete.");
            // do your "link swap" operation (whatever it is) right here. 
        });
        $('#main').animate({
            'padding-bottom' : 150
        });
    });
});

编辑：如果你想让页脚最初可见（以较小的尺寸），然后让它“滑出”到更大的尺寸，只需在我上面显示的 css 中设置你想要的任何高度（而不是 0）。

您可以将任何您喜欢的内容放入页脚 div 中——因此，如果您想在较小的时候显示一组内容，而在较大的时候显示不同的内容，那么只需将这些块放入页脚中的两个单独的 div 中。设置它们position:absolute;top:0;，因此它们将在页脚内相互重叠。将“展开视图”设置为display:none最初，然后在单击处理程序（或动画回调）中使用 jqueryfadeIn()和fadeOut()函数来交换页脚中展开和折叠视图的可见性。

这是 jsFiddle 示例，进行了相应调整

现在，如果你真的想要花哨，你可以让页脚高度依赖于两个不同内容视图的高度。（这可能是我会做的）。

这是一个“更高级”的 jsFiddle，它从内容中计算出高度

编辑：如果您交换两个动画调用的顺序（所以$('#main').animate(...)在之前$('#footer').animate(...)），动画将运行得更流畅，并且滚动条在动画期间不会闪烁开/关。（我本来应该这样展示的）。 这是一个更新的 jsFiddle，显示了这个微小的变化。

于 2010-11-29T06:25:02.677 回答