jQuery - 当用户单击文档中除菜单本身之外的任何其他位置时，如何使菜单淡出？

Question

我有一个链接，其功能类似于下拉菜单，因为单击时它会淡入其下方的链接列表中。目前，当再次单击链接时，列表会淡出，但我希望如果用户单击页面上的其他位置，列表也会淡出。我不确定如何添加处理此问题的 $(document).click(function()... ，或者这是否是正确的方法。这是我的代码:

$('#show_button').click( function(){
    if(!$('#list').is(':visible')){
        var pos = $('#show_button').offset();
        $('#list').css({'left':pos.left - 11, 'top': pos.top+14}).fadeIn();
    }
    else{
        $('#list').fadeOut();
    }   
});

我正在尝试添加类似的内容，以便当用户单击页面中的其他任何位置时使列表淡出:

if($('#list').is(':visible')){
    $(document).click(function() {
        $('#list').fadeOut();
    });
}

提前致谢 - 如果您对此有任何帮助，我将不胜感激:)

Answer 1

您可以检查事件所针对的元素并查看 id 是否等于 list。如果不是，则 fadeOut() 列表

$(document).click( function(e){
    if (e.target.id != "list") $("#list").fadeOut();
});