javascript - 隐藏用户事件上的特定 Div（即点击）

Question

我打开我的通知是通过单击页面顶部的铃铛图像，它只是亮起并正确打开，但现在我希望每当用户在通知的 div 内单击时，通知框就会出现与它相同的情况，但只要在 div 外单击它就会关闭（div id是 HS 通知）

Answer 1

让文档监听点击事件。

$(document).on('click', function (e) {
    e.preventDefault();
    var $target = $(e.target);

    // You are checking the current clicked element is the div 
    // or any of the descendants of the notifications div
    if ($target.closest('#HSnotifications').length) {
        // Clicked inside the notifications.

        // do something
    } else if ($target.is('#showNotificationsBtn')) {
       // If bell button is clicked open the notification
        $('#HSnotifications').show();

    } else {

        // close notifications

        $('#HSnotifications').hide()
    }

});

检查小提琴

Answer 2

这应该做你需要的。单击背景覆盖时，隐藏/关闭HSnotifications.

<script>
$(document).ready(function() {
    $('.ui-panel-content-wrap').click(function (event) {
        if ($(event.target).hasClass('ui-panel-content-wrap')){
            $('#HSnotifications').hide();
        }
    });
});
</script>