点击时页脚向上/向下

Question

我在点击事件中的页脚位置存在问题。我正在使用引导 css，我有一个可折叠元素（引导中的手风琴），当它折叠时它有一个名为 .accordion-toggle.collapsed 的类，而不是他的类是 .accordion-toggle。

好吧，当这个元素折叠时，我试图向下滑动页脚（因为它覆盖了页脚），我的代码是：

<script>
$(function() { 

    var collapsed = $('.accordion-toggle.collapsed');

    $('#links').click(function(){
        if (collapsed){
            $(".footer").css({'margin-top':'320px'});
        }else{
            $(".footer").css({'margin-top':'150px'});
        } 
    });

});
</script>

问题是，当我单击可折叠元素时，页脚会向下滑动，但是当我再次单击并且未折叠时（他的类更改为（手风琴切换），页脚不会返回到他的原始位置，即: 150px 上边距。

谢谢你的帮助！！！

Answer 1

更新：将您的 javascript 更改为：

var collapsed;
$('#links').click(function () {
    collapsed = $('#links').hasClass('collapsed');
    if (collapsed) {
        $(".footer").css({'margin':'320px 0px 0px 0px'});
    } else {
        $(".footer").css({'margin':'150px 0px 0px 0px'});
    }
});

每次单击#links 时，您都需要为collapsed 分配一个新值。另外，jQuery 的.css() 显然与margin-top 有问题，所以只需使用margin 来分配值。