javascript - 当用户单击通知 Div 之外的任意位置时，使通知 Div 淡出

Question

我正在制作带有通知“按钮”的网站。当用户单击此按钮时，通知 div 将出现在按钮底部。

我想让它的行为像 Facebook 中的通知一样。当用户单击通知 div 元素之外的任何位置时，通知将消失。

到目前为止，我已经成功地使通知 div 在单击通知按钮时淡入和淡出。我正在使用 jquery 来执行此操作。

但是，我不知道当用户单击通知 div 之外的任何位置时如何使其淡出。

有人可以帮助我吗？

这是我编写的代码:

<div id="notifikasi" style="position:relative; cursor:pointer">Notification<sup style="padding: 2px 4px 2px 4px; background: red"></sup>
    <div id="theNotif" style="position: absolute; top: 20px; left: 0px; background: #fff; color: #000; border: solid 1px #999; z-index: 999; padding: 10px 20px 10px 0px; width:200px; display:none">
        <ul>
            <li>Some Notification</li>
            <li>Some Notification</li>
            <li>Some Notification</li>
        </ul>
    </div>
</div>

<script>
$('#notifikasi').click(function(){
    if($('#theNotif').css('display') == 'none'){
        $('#theNotif').fadeIn('fast');
    }
    else{
        $('#theNotif').fadeOut('fast');
    }
});
</script>

Answer 1

试试这个:

$(document).mouseup(function (e)
{
    var myDiv = $("#theNotif");
    if (myDiv.has(e.target).length === 0)
        myDiv.hide();
});