Question

我有一个滑动页脚（＆＃39; footerSlideContent＆＃39;），可以通过点击按钮（＆＃39; footerSlideButton＆＃来上下滑动（打开和关闭） 39）。（下面的第一个.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”＃39;只需点击“文档”中的任意位置即可。或身体。我试过这个（没用）：

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

我也试过这个:(这个工作正好一次（因为我可以通过单击文档上的任意位置来关闭它），但是然后是＆＃39; footerSlideButton＆＃39;（用于再次打开页脚）消失...

$(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;
            });
        }
    });  
});

Answer 2

只是为了通知你，这个版本对我有用：

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



$(document).click(function (e) {
    if ($(e.target).closest('#footerSlideContent').length > 0 || $(e.target).closest('#footerSlideButton').length > 0) return;
   $('#footerSlideContent').animate({ height: '0px' });
    $("#footerSlideButton").show(1);
  });

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

2 个答案: