javascript - Pop-up the footer with jquery on website with FIRST clicking?

Question

I have issue for pop-up the footer with jquery. My code is work but the only problem is it doesn't work with the first click on the button, it work by second clicking on the button? any idea? Here is my code:

<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);