引导弹出窗口隐藏在外部单击上。 仅在第二次点击时打开

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来关闭酥料饼，因为文件说， 文档

下次点击时关闭

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

            <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"在用户下次单击时关闭弹出窗口。

Answer 2

在许多情况下（大多数情况下是文档中的其余代码），一旦离开弹出窗口，就必须重新集中精力。 此事件很难将click事件绑定到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');
    }
});
});

这是工作的小提琴