[英]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
$('[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;
}
我的頁面中有這兩個彈出窗口,當我單擊其中的一個,然后單擊第二個之后,第一個彈出窗口就會隱藏起來,並且一切正常。 但是當我再次單擊第一個彈出窗口后,似乎無法正常工作。 鼠標無法在滾動條中單擊,並且彈出窗口中的鏈接無法正常工作。 我認為瀏覽器將保持打開的最后一個彈出窗口,即使它是隱藏的。 有什么建議嗎? 謝謝!
我解決了此問題(由於有關彈出窗口的另一篇文章),添加了以下代碼:
// 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;
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.