Question

我正在使用Bootstrap Popover，popover内容是一个HTML。我使用下面的代码来初始弹出窗口。此代码基于https://stackoverflow.com/a/13203876/1354727此答案。弹出窗口内容位于id为#song-status-popover的div中。

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});

我想在弹出窗口外单击时关闭弹出窗口，所以我使用下面的代码：

$('html').on('mouseup', function (e) {
            if (!$(e.target).closest('.popover').length) {
                $('.popover').each(function () {
                    $(this).closest('div.popover').popover('hide');
                });
            }
});

直到现在它做得很好，但我在使用两个代码时面临一个问题。当我打开popover并点击外面关闭它时，如果我再次点击链接打开popover，它就不会在第一次点击时打开。我必须点击两次才能打开它。

我想知道我错过了什么，以及为什么我无法通过点击外部关闭它后单击打开popover。请帮忙！

更新：我相信当我在外面点击它会隐藏popover，但是bootstrap仍然认为它是打开的，并且在第一次点击时它实际上认为它已关闭，并且在第二次点击时它会打开popover。 / p>

Answer 1

尝试以下代码

$('html').on('click', function(e) {
  if (!$(e.target).is('.song-status-link') && $(e.target).closest('.popover').length == 0) {
    $(".song-status-link").popover('hide');
  }
});

http://jsfiddle.net/xzeb91hf/

Answer 2

您必须.find()使用:visibile检查DOM中的可见性/可用性：

if ($(this).find('.popover:visible').length) {
    $('.popover').popover('hide');
}

Answer 3

这实际上可以通过bootstrap本地实现，唯一的缺点是不能成为popover中的任何可聚焦元素。

在official documentation中查找点击下次点击部分。

它基于用于触发弹出窗口的焦点事件，以及用于再次隐藏它的模糊事件。单击触发链接外部将触发模糊事件，弹出窗口将隐藏。

在

3 个答案: