Question

使用其他答案的解决方案隐藏外部点击时的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');
  }
});

任何想法为什么会发生以及如何让弹出窗口始终在第一次点击时打开？

一个注意事项：我发现不可能使用这个＆＃34;官方＆＃34;解决方案，因为它无法点击弹出窗口内的链接：http://getbootstrap.com/javascript/#dismiss-on-next-click

Answer 1

您不需要额外的J来关闭弹出窗口，因为文档说Small getopts tutorial

点击下一次点击

使用焦点触发器消除用户下次点击时的弹出窗口。

            <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。

Answer 2

在许多情况下（主要是文档中的其余代码），一旦离开弹出窗口，就必须重新关注它。此事件不容易将click事件绑定到html或body。按钮往往比超链接更好地重新获得焦点。（这是我的理论，我对它提出质疑，但它是我在这里和那里读过的）重点是，这段代码很有用，很重要，不是＆＃ 39？是吗？

我建议您将超链接更改为按钮并设置样式，使其看起来像超链接，如果您需要并使用此处提供的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

Bootstrap popover隐藏在外部点击。仅在第二次点击时

2 个答案: