javascript - 如何在 JQ 中显示一个 block ，然后在单击主体时将其隐藏

Question

我的页面上有一个信息气泡。用户可以通过单击图标来打开它，我希望他们能够通过单击正文中的任何位置来关闭它。

http://jsfiddle.net/etDBE/7/

我不知道如何触发打开事件，因为父级总是关闭气泡。我尝试了 $('body').not('.i-icon') 但这是不对的。有什么建议吗？

$(document).ready(function () {
    var iIsOpen = false;

    $('body').not('.i-icon').click(function () {
        if (iIsOpen == true) {
            //alert('close bubble');
            $('.i-narrow').hide();
            iIsOpen = false;
        }
    });


    $('.i-icon').click(function () {
        //alert('open bubble');
        $('.i-narrow').show();
        iIsOpen = true;
    });
});

Answer 1

您可以像这样缩短代码:

$(document).ready(function () {
    $(document).on('click',function (e) {
        $('.i-narrow').hide();
    });
    $('.i-icon').click(function (e) {
        e.stopPropagation();
        $('.i-narrow').show();
    });
});

所以基本上，当您单击文档中的任何位置时，您的 .i-narrow 将被隐藏

但是，如果您单击 .i-narrow 本身，click 事件将在 DOM 树上冒泡，从而触发 click code> 事件也在 document 级别发生，并且 .i-narrow 中的结果将再次隐藏。

这就是为什么你需要使用 e.stopPropagation() 的原因 在这里防止您的点击事件冒泡。

<强> Updated Fiddle