Bootstrap popover隐藏在外部点击.仅在第二次单击时打开

Bootstrap popover hide on outside click. Opens only on second click

本文关键字：单击 第二次 popover 隐藏 外部 Bootstrap      更新时间：2023-09-26

使用其他答案中的解决方案在外部单击时隐藏Bootstrap弹出窗口。

然而，它需要两次点击才能再次打开popover（如果我通过点击外部关闭它）。

它工作正常，当我使用按钮关闭它时，第一次点击就会打开。

以下是重新创建的问题：http://codepen.io/olegovk/pen/BjQmQe

使用的html：

<!-- Popup button -->
<a id="menu-button" class="menu-button" data-html="true" role="button" data-container="body" data-toggle="popover" data-placement="bottom">Menu</a>
<!-- Popup content -->
<div id="menu-content">
  <h1>Hello</h1>
  <p>Good bye</p>
  <a href="#">Link</a>
</div>

以及jQuery:

$('#menu-button').popover({
  content: $('#menu-content').html(),
  html: true
});
$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
    !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});

有什么想法吗？为什么会发生这种情况，以及如何让弹出窗口总是在第一次点击时打开？

需要注意的是：我发现不可能使用这个"官方"解决方案，因为它使点击弹出窗口内的链接变得不可能：http://getbootstrap.com/javascript/#dismiss-在下一次单击时

您不需要额外的Js来关闭popover，正如文档中所说的docs

下次点击时取消

使用焦点触发器可以在用户下一次单击时取消弹出窗口。

            <a tabindex="0" 
            class="btn btn-lg btn-danger" 
            role="button" data-toggle="popover" 
            data-trigger="focus" title="Dismissible popover" 
            data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
            </a>

data-trigger="focus"在用户下次单击时关闭弹出窗口。

在许多情况下（主要是文档中的其余代码），一旦你离开popover，你就必须重新关注它。这个事件不容易将点击事件绑定到html或body。按钮往往比超链接更能重新获得焦点。（这是我的理论，我会质疑它，但这是我在这里和那里读到的）重点是，这个代码有效，哈哈，这是重要的，不是吗？

如果需要，我建议您将超链接更改为按钮，并将其设置为超链接样式，并使用此处提供的jFiddle中的代码

$('[data-toggle="popover"]').popover();


$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 &&       
$('.popover').has(e.target).length === 0) {
        $(this).popover('hide');
    }
});
});

这是工作jfiddle

相关文章：