Question

我有问题用jquery弹出页脚。我的代码是有效的，但唯一的问题是它不能在第一次点击按钮时工作，它可以通过第二次点击按钮来工作吗？任何的想法？这是我的代码：

<script type="text/javascript">

    jQuery(function($) {

        var open = false;

        $('#footerSlideButton').click(function () {

            if(open === false) {

                $('#footerSlideContainer').animate({ height: '0' });

                $(this).css('backgroundPosition', 'top left');

                open = true;

            } else {

                $('#footerSlideContainer').animate({ height: '150px' });

                $(this).css('backgroundPosition', 'bottom left');

                open = false;

            }

        });        

    });

</script>

Answer 1

我会将其浓缩为：

(function($){
    window.opened=false;
    $('#footerSlideButton').on('click', function () {
        $('#footerSlideContainer').animate({ height : opened ? '0' : '150px'});
        $(this).css('backgroundPosition', opened ? 'top left' : 'bottom left');
        opened = !opened;
    });
})(jQuery);

您还可以将打开状态存储在元素数据中：

(function($){
    $('#footerSlideButton').on('click', function () {
        $('#footerSlideContainer').animate({ height : $(this).data('open') ? '0' : '150px'});
        $(this).css('backgroundPosition', $(this).data('open') ? 'top left' : 'bottom left');
        $(this).data('open', !$(this).data('open'));
    });
})(jQuery);

用FIRST点击在网站上用jquery弹出页脚？

1 个答案: