當用戶在其外部單擊時隱藏元素

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

小提琴