javascript - 单击任意位置以隐藏滑动页脚

Question

我有一个滑动页脚 ('footerSlideContent')，它通过单击按钮 ('footerSlideButton') 上下滑动(打开和关闭)。 (下面的第一个 .js 代码显示了它现在是如何工作的)

jQuery(function($) { 
    var open = false;
    $('#footerSlideButton, .footer_wrapper').click(function () {
        if(open === false) {
            $('#footerSlideContent').animate({ height: '37px' });
            $(this).css('backgroundPosition', 'bottom left');
            $("#footerSlideButton").hide(1);
            open = true;
        } else {
            $('#footerSlideContent').animate({ height: '0px' });
            $(this).css('backgroundPosition', 'top left');
            $("#footerSlideButton").show(1);
            open = false;
        }
    });     
}); 

现在我希望能够通过单击“文档”或主体上的任意位置来关闭“footerSlideContent”。我试过了(没用):

jQuery(function($) { 
    var open = false;
    $('#footerSlideButton, .footer_wrapper').click(function () {
        if(open === false) {
            $('#footerSlideContent').animate({ height: '37px' });
            $(this).css('backgroundPosition', 'bottom left');
            $("#footerSlideButton").hide(1);
            open = true;

        }
    });     
}); 

$(document).click.(function () {
    $('#footerSlideContent').animate({ height: '0px' });
});

我也试过这个:(这只工作一次(因此，我可以通过单击文档上的任意位置一次来关闭它)，但随后“footerSlideButton”(用于再次打开页脚)消失了...

$(document).click(function (e) {
    if ($(e.target).closest('#footerSlideContent').length > 0 || $(e.target).closest('#footerSlideButton').length > 0) return;
    $('#footerSlideContent').slideUp(400);
});

提前致谢!

Answer 1

您需要将另一个点击事件监听器附加到 document。为防止出现重叠问题，请将 e.target 与按钮进行比较，如果没有重叠，则仅触发第二个处理程序的代码。 并且对于带有open 标志的正确逻辑，使用.animate() 处理程序来运行相关代码，包括翻转open.

jQuery(function($) { 
    var open = false;
    $('#footerSlideButton, .footer_wrapper').on('click', function () {
        if( !open ) {
            $('#footerSlideContent').animate({ height: '37px' }, function() {
                $(this).css('backgroundPosition', 'bottom left');
                $("#footerSlideButton").hide(1);
                open = true;
            });
        } else {
            $('#footerSlideContent').animate({ height: '0px' }, function() {
                $(this).css('backgroundPosition', 'top left');
                $("#footerSlideButton").show(1);
                open = false;
            });
        }
    });

    $(document).on('click',function() {
        if( open && !$(e.target).is("#footerSlideButton") ) {
            $('#footerSlideContent').animate({ height: '0px' }, function() {
                open = true;
            });
        }
    });  
});