Bootstrap 3 Popover显示一个并隐藏其他不起作用 [英] Bootstrap 3 popover show one and hide others doesn't work
问题描述
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
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;
}
我的页面中有这两个弹出窗口,当我单击其中一个时,在单击第二个弹出窗口后,第一个弹出窗口将隐藏起来,并且一切正常.但是当我再次单击第一个弹出窗口后,似乎无法正常工作.鼠标无法在滚动条中单击,并且弹出窗口中的链接无法正常工作.我认为浏览器将保持打开的最后一个弹出窗口,即使它是隐藏的.有什么建议吗?谢谢!
I have these two popovers in my page, and when i click in one of this, and after i click in the second, the first popover hides, and everything works fine. But when i after click again on the first popover, it seems doesn't work properly. The mouse can not click in the scroll, and the links in the popover don't work fine. I think the browser is holding open the last opened popover, even if it is hide. Any suggestion? Thanks!
推荐答案
我解决了我的问题(由于在弹出窗口上发表了另一篇文章),添加了以下代码:
I solved (thanks to another post on popovers) my problem adding this code:
// 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显示一个并隐藏其他不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!