Javascript Twitter Bootstrap：打开时隐藏其他弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14760683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap: Hide other popovers when one is open
提问by farjam
The following Bootstrap code gives me "sticky" popover (so users can interact with the content inside the popover). The issue is that when a popover is opened, other popovers should be closed (hidden). Any idea how I can implement this?
以下 Bootstrap 代码为我提供了“粘性”弹出框（因此用户可以与弹出框内的内容进行交互）。问题是当打开一个弹出窗口时，其他弹出窗口应该关闭（隐藏）。知道如何实现这一点吗？
$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
$(this).popover('show');
e.preventDefault();
});
采纳答案by David Spence
I've been having a play about with this and there's a few other problems regarding triggering the manual show/hide to get this to play nicely. Hover is actually mouseinand mouseoutand unless you add in some additional checks, you will come across the problems that I just did!
我一直在玩这个，还有一些其他关于触发手动显示/隐藏以使其正常播放的问题。悬停实际上是mousein并且mouseout除非您添加一些额外的检查，否则您会遇到我刚刚做的问题！
Here is my solution in actionand I'll try to explain what I've done.
这是我的解决方案，我将尝试解释我所做的。
$(function () {
var overPopup = false;
$('[rel=popover]').popover({
trigger: 'manual',
placement: 'bottom'
// replacing hover with mouseover and mouseout
}).mouseover(function (e) {
// when hovering over an element which has a popover, hide
// them all except the current one being hovered upon
$('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
var $popover = $(this);
$popover.popover('show');
// set a flag when you move from button to popover
// dirty but only way I could think of to prevent
// closing the popover when you are navigate across
// the white space between the two
$popover.data('popover').tip().mouseenter(function () {
overPopup = true;
}).mouseleave(function () {
overPopup = false;
$popover.popover('hide');
});
}).mouseout(function (e) {
// on mouse out of button, close the related popover
// in 200 milliseconds if you're not hovering over the popover
var $popover = $(this);
setTimeout(function () {
if (!overPopup) {
$popover.popover('hide');
}
}, 200);
});
});
This worked perfectly for me with the following html:
这对我来说非常适合使用以下 html：
<a href="#" id="example1" class="btn large primary" rel="popover" data-content="Example 1!!!" data-original-title="Example 1 title">Button 1</a>
<a href="#" id="example2" class="btn large primary" rel="popover" data-content="Example 2!!!" data-original-title="Example 2 title">Button 2</a>
<a href="#" id="example3" class="btn large primary" rel="popover" data-content="Example 3!!!" data-original-title="Example 3 title">Button 3</a>
Hope that sorts you out :)
希望能帮到你:)
回答by adam
There's a very simple solutionhere (not my solution, but works beautifully):
这里有一个非常简单的解决方案（不是我的解决方案，但效果很好）：
$('.link-popover').click(function(){
$('.link-popover').not(this).popover('hide'); //all but this
});
回答by alexoviedo999
As per the bootstrap docs: Use the focus trigger to dismiss popovers on the next click that the user makes.
根据引导程序文档：使用焦点触发器在用户下次单击时关闭弹出窗口。
<a href="#" 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>
回答by saneshark
Using Bootstrap 3's event callbacksyou can do:
使用Bootstrap 3 的事件回调，您可以执行以下操作：
$(document).on('show.bs.popover', function() {
$('.popover').not(this).popover('hide');
});
and in coffeescript
并在咖啡脚本中
$(document).on 'show.bs.popover', ->
$('.popover').not(this).popover('hide')
回答by Dean Meehan
Simpiet solution to close all other popovers. This can be added to any event where a popup will appear such as click/hover etc. Just before you show the popover paste in the following code:
关闭所有其他弹出窗口的简单解决方案。这可以添加到将出现弹出窗口的任何事件，例如单击/悬停等。 就在您在以下代码中显示弹出窗口粘贴之前：
$('.popover').not(this).hide(); //Hides all other popovers
This will remove all popovers on page except the current one
这将删除页面上除当前弹出框之外的所有弹出框
回答by Abdullah Ayd?n
$('li').popover({
title: 'My title',
content: 'My content'
})
.on('show.bs.popover', function() {
if (window._bsPopover) {
$(window._bsPopover).popover('hide')
}
window._bsPopover= this;
})
.on('hide.bs.popover', function() {
window._bsPopover= null; // see Peter Jacoby's comment
});
回答by saddam
I used a function for my content and it is work properly.
我为我的内容使用了一个函数，它工作正常。
$(function () {
$('[data-toggle="popover"]').click(function(){
$(this).popover('toggle');
$('[data-toggle="popover"]').not(this).popover('hide'); //all but this
});
})
回答by jni
I used a function for my content, so I have (in coffeescript) :
我为我的内容使用了一个函数，所以我有（在 coffeescript 中）：
provideContentForPopover = (element) ->
$('.some-selector').not(element).popover 'hide'
"some content to be returned"
$('.some-selector').popover
content: -> provideContentForPopover @
回答by friggle
$('.allThePopovers').click(function () {
if ($(this).hasClass('popoverIsOpen')) {
$(this).removeClass('popoverIsOpen');
} else {
$('.popoverIsOpen').popover('hide');
$('.allThePopovers').removeClass('popoverIsOpen');
$(this).addClass('popoverIsOpen');
});
Just replace click with hover or mousein to suit your needs.
只需将 click 替换为 hover 或 mousein 即可满足您的需求。
回答by Qullbrune
This works fine if you want to have only one popover opened at once, opened and closed by a click (cursor-position is irrelevant):
如果您只想一次打开一个弹出窗口，通过单击打开和关闭（光标位置无关紧要），这可以正常工作：
$('[data-toggle="popover"]').popover({ html: true }).bind("click", function(){
if(!$(this).parent().children("a").first().is(":hover"))
$( '[data-toggle="popover"]').popover("hide");
else
$( '[data-toggle="popover"]').not($(this).parent().children("a").first()).popover("hide");
return false;
});
It is important that every popover has an individual parent, like
重要的是每个 popover 都有一个单独的父级，比如
<ul> <li> <popover> </li> <li> <popover> </li> </ul>
HTML:
HTML：
<li>
<a id="quickmenu-i-305" data-toggle="popover" data-placement="bottom" data-title="Title" data-content='<h2>Plesk Login</h2>' href="Plesk Login">Ihr Kundenbereich</a>
</li>
