javascript - Bootstrap 弹出窗口在外部点击时隐藏。仅在第二次点击时打开

Question

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

然而，它需要点击两次才能再次打开弹出窗口(如果我通过点击外部关闭它)。

当我使用按钮关闭它时，它工作正常并在第一次单击时打开。

这是重新创建的问题: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-on-next-click

Answer 1

您不需要额外的 Js 来关闭弹出窗口，如文档所述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" 在用户下次点击时关闭弹出窗口。