引导3酥料饼显示一个隐藏其他不起作用(Bootstrap 3 popover show one an

HTML

<ul class="navbar-nav pull-right"> 
    <li><a href="#" data-toggle="popover" title="Notifiche" data-html="true" data-content="Notification1<hr />Notification 2<hr />Notification 3">Notifications</a></li>
    <li><a href="#" data-toggle="popover" title="Messages" data-html="true" data-content="Message 1<hr />Message 2<hr />Message 3">Messages</a></li>
</ul>

JAVASCRIPT

$('[data-toggle="popover"]').popover({placement: 'bottom', trigger: 'click' });

//hide popover when click outside
$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        if ($(this).has(e.target).length === 0 && $('.popoVer').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
    });
  });

CSS

.popover-content {
max-height: 150px;
overflow-y: scroll;

}

我有这两个popovers在我的页面，当我点击其中一个，之后我在第二次点击，第一酥料饼皮，和一切工作正常。 但是，当我再次点击第一个酥料饼后，似乎不能正常工作。 鼠标不能在滚动单击，在酥料饼的链接不正常工作。 我认为浏览器是抱着开放的最后一个打开的酥料饼的，即使它是隐藏。 任何建议？ 谢谢！

Answer 1:

我解决了（由于在popovers另一篇文章）我的问题，添加以下代码：

// hide other popovers (and their links from the DOM) opened
        $(document).mouseup(function (e) {
            if ($('.popover').has(e.target).length === 0) {
                $('.popover').toggleClass('in').remove();
                return;
            }
        });

文章来源: Bootstrap 3 popover show one and hide others doesn't work