Question

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

我无法弄清楚如何触发开放事件，因为父母总是关闭泡泡。我试过$('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级别的document事件好的，.i-narrow的结果会再次隐藏。

因此，您需要在此处使用 e.stopPropagation() 来防止点击事件冒出来。

<强> Updated Fiddle

Answer 2

处理打开图标的点击事件时使用event.stopPropagation()。

它将停止将DOM树冒泡到Body的点击事件，这就是元素隐藏的原因。

请注意，这也意味着在显示“气泡”时单击i-icon元素不会隐藏元素，因为它不会触发Body的点击事件。

代码：

$('.i-icon').click(function () {
    event.stopPropagation(); // Stops the Click event bubbling up the DOM tree
    $('.i-narrow').show();
    iIsOpen = true;
});

Answer 3

在这里你有很多方法可以做同样的事情，这是你验证的另一种方式：

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

将return false;放在事件的最后。

Answer 4

请尝试使用此代码，

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

    $('body').bind('click',function (e) {
        e.stopPropagation();
        if(!$(e.target).closest('.i-icon').length){
        if (iIsOpen == true) {
            //alert('close bubble');
            $('.i-narrow').hide();
            iIsOpen = false;
        }
        }
    });


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

});

FIDDLE

Answer 5

你可以用这个：

<强> HTML

<div class="container">
<img class="i-icon" src="images/i.png">
<div class="i-narrow">
    <div>Content</div>
</div>
    </div>

<强>的javascript

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

    $(document).bind('click', function(e){ 
        var $clicked = $(e.target); 
        if (!($clicked.is('.container') || $clicked.parents().is('.container'))) { 
            $('.i-narrow').hide();
        } else { 
            // click inside, to what you want, or nothing :) 
        } 
    });


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

fiddle这个

如何显示一个块，然后将其隐藏在JQ上

5 个答案: