Question

$( document ).on('click', '.toggle_comments', function( event ){

    event.preventDefault();

    var container = $('div[name="comments"]');

    if ( container.css('display') == 'block' ) {

        container.hide();

        return;
    }

    container.fadeIn(500);
});

当点击.toggle_comments时，容器会淡入。有没有办法做某事，即淡出，如果容器外面的任何东西被点击了它的显示块？显然，请注意.toggle_comments首先在它之外。所以它需要是一个实时事件，只有当容器处于display:block状态时才会触发。

Answer 1

您可以将mousedown事件绑定到document并检查点击的元素是否不是div[name="comments"]，如下所示：

$(document).mousedown(function(event)
{
    var commentSection = $('div[name="comments"]');

    if(!$(commentSection).is($(event.target)) && !$(event.target).closest($(commentSection)).length)
        $(commentSection).fadeOut();
});

Answer 2

如果点击不同的元素，只需做不同的事情

$( document ).on('click', function( event ){
    event.preventDefault();

    var target    = $(event.target);
    var container = $('div[name="comments"]');

    if ( target.closest('.toggle_comments').length > 0 ) {
        if ( container.is(':visible') ) {
            container.hide();
        } else {
            container.fadeIn(500);
        }
    } else if (target.closest(container).length === 0 && container.is(':visible')) {
        container.fadeOut(500); 
    } 
});

FIDDLE

当用户在其外部单击时隐藏元素

2 个答案: